Layout problem on narrower screens
-
Hey all,
Blog looks good on a typical laptop screen. Looks fine on a phone (as the mobile theme works its magic). But on an iPad? Not great.
Here’s how it looks normally:
[IMG]http://i62.tinypic.com/o7m0jk.jpg[/IMG]
And here’s how it looks on an iPad or in a smaller browser window:
[IMG]http://i57.tinypic.com/2irm2h5.jpg[/IMG]
Is there a way to narrow the width of the menu (I’m assuming that’s the problem) so that it can work properly on an iPad in portrait orientation?
Thanks in advance for your kind help!
The blog I need help with is: (visible only to logged in users)
-
-
Just bumping this one. Even though an iPad mini is 768×1024, the menubar doesn’t display properly when the iPad’s in portrait orientation. For some reason, it forces the menubar to display vertically.
Moving the menubar below the header at least keeps the vertical menubar out of the way of the title header, but it doesn’t look too good.
Any thoughts on this? I wonder if it’s possible to contact the designer direct and see if they’re aware of the issue…
-
Interestingly, even if I make the font size tiny, it still displays vertically on an iPad, rather than horizontally. Weird.
-
Ok, here’s the helpful response from the developer. However, I’m not sure how to implement what he’s saying.
Based on what I could see on your site, however, it seems like the code in the media queries (which dictate how the theme will look on phones and tablets) hasn’t been adapted for the new menu design.
For instance, according to the CSS, the main menu is supposed to be hidden at 800px width. However, the code on line 199 in your revision:
#site-navigation ul {
display: inline-block;
width: auto;
}
…prevents that from happening. I would recommend you to take a look at the changes you’ve made to the header and compare it to the code at @mediaquery (max-width: 800px) in the themes style.css file.The code he’s referring to centers the menubar.
So I guess the question is: can we center the menubar without causing it to drop down vertically on narrower screens?
Eternal gratitude awaits any brave soul who can solve this conundrum.
-
So I guess the question is: can we center the menubar without causing it to drop down vertically on narrower screens?
Yes, but I will first note that this kind of thing starts to get quite tricky when mixing CSS with and without media queries. My first best advice is to make sure to learn how media queries work so you have at least a good solid basic understanding of them. Start here: http://en.support.wordpress.com/custom-design/custom-css-media-queries/
Then just make sure to keep testing various screen widths because the custom CSS you add for one thing later can impact the media queries in weird ways if you’re not careful . :)
Based on your current setup, try adding the following to undo the CSS that stacks the main menu items vertically on screens smaller than 800px on the Hemingway Rewritten theme:
@media screen and (max-width: 800px) { .menu-toggle { display: none; } .main-navigation li { clear: none; float: left; } .main-navigation a { padding-left: 1em; padding-right: 1em; } } -
designsimply, this has been doing my head in for ages. Thank you for sorting it out! :) It works perfectly now. I’ll take a look at the media queries link.
One slight oddity you might be able to explain. On my iPad mini, the menubar looks as if it’s a slightly different color (dark grey) to the deep black either side of it. At the risk of trying your patience, do you have any idea of how to fix that?
-
On my iPad mini, the menubar looks as if it’s a slightly different color (dark grey) to the deep black either side of it. At the risk of trying your patience, do you have any idea of how to fix that?
No problem. To undo the different dark gray that the theme uses for the menu and menu links at smaller screen sizes, add this to your Appearance > Customize > CSS editor:
@media screen and (max-width: 800px) { .main-navigation .menu, .main-navigation a { background: inherit; border-bottom: none; } }This example also removes the bottom border.
Note that since you already have an @media rule for “max-width: 800px”, you can add the rule inside the example above into the same block as the other rules you have.
-
Thanks so much, designsimply. That does the trick!
I really appreciate the time you’ve taken to walk me through this (and in other threads). Thanks so much for your expertise and time. If you’re passing through London, the Guinness is on me!
-
That does the trick!
Oh whew! Awesome. :)
If you’re passing through London, the Guinness is on me!
I do make it to London from time to time. :) Maybe I’ll see you some time at a WordPress meetup.
- The topic ‘Layout problem on narrower screens’ is closed to new replies.
WordPress.com Forums 
