Header logo too wide on narrower screens - iPhone 4/5 and split view


#1

Was playing around in safari’s new responsive design mode and noticed that the logo is a little too wide when logged out pushing the buttons on the right downwards:

I don’t actually have a iPhone 4 or a 5 anymore so I can’t personally test this out on the actual device, but I seem to be able to reproduce it on both meta and try:


#2

ok, looks like this is also an issue on iOS 9’s multitasking split view and slide over modes:


(Jeff Atwood) #3

I think this is a different regression – both buttons should not show up on mobile; there’s simply not room for both “Sign Up” and “Log In”.

Can you post a fuller screenshot, I am not clear how you’re generating the above.


#4

The first images are from OS X El Cap’s new responsive design mode in safari emulating an iPhone 4 or 5’s narrow display.

The second one is a screen grab from my iPad air 2 using the split screen mode. I believe discourse automatically sends the desktop version to the iPad even when in split-view/slide-over mode causing the two buttons to show up.

My iPad just died but i’ll try to post some more images tomorrow.


(Simon Cossar) #5

Maybe the button needs its own row.


(Jeff Atwood) #6

No – that would make the fixed header absurdly large.

Hmm, I changed the max-width but now the logo is being pushed down. Aha looks like left over valign-helper hack, let’s get rid of that too.


#7

wider logos still looked a little weird on mobile…

I think this should fix it:

.d-header .title{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}
@media only screen and (min-width: 375px) {
	.d-header .title, .d-header #site-logo {
		max-width: 185px;
	}
}

hope this helps!


(Jeff Atwood) #8

Yep that is a bug we need to fix, ideally with flexbox.


(Jeff Atwood) #9