# Header logo too wide on narrower screens - iPhone 4/5 and split view
**URL:** https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701
**Category:** UX
**Created:** [October 20, 2015, 1:08am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701 "2015-10-20T01:08:42Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@mr8](https://meta.discourse.org/u/mr8)
#### Post date: [October 20, 2015, 1:08am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/1 "2015-10-20T01:08:42Z")
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:
---
### Author:  [@mr8](https://meta.discourse.org/u/mr8)
#### Post date: [October 20, 2015, 4:52am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/2 "2015-10-20T04:52:10Z")
ok, looks like this is also an issue on iOS 9’s [multitasking](http://www.apple.com/ios/whats-new/#ipad) **split view** and **slide over** modes:
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [October 20, 2015, 5:14am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/3 "2015-10-20T05:14:44Z")
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.
---
### Author:  [@mr8](https://meta.discourse.org/u/mr8)
#### Post date: [October 20, 2015, 5:36am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/4 "2015-10-20T05:36:38Z")
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.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [October 20, 2015, 6:37am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/5 "2015-10-20T06:37:57Z")
Maybe the button needs its own row.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [October 20, 2015, 7:42am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/6 "2015-10-20T07:42:56Z")
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.
---
### Author:  [@mr8](https://meta.discourse.org/u/mr8)
#### Post date: [November 15, 2015, 5:57pm UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/7 "2015-11-15T17:57:00Z")
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!
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 15, 2015, 10:56pm UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/8 "2015-11-15T22:56:51Z")
Yep that is a bug we need to fix, ideally with flexbox.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [August 18, 2016, 8:48am UTC](https://meta.discourse.org/t/header-logo-too-wide-on-narrower-screens-iphone-4-5-and-split-view/34701/9 "2016-08-18T08:48:35Z")