- This topic has 2 replies, 3 voices, and was last updated 4 years, 6 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
The header of my website on mobile is way too large. Any idea how to change this? website is http://www.stopbeingconfusedabouthealth.com
I'm going to look into it, but responses appreciated. Specifically, on the right it says "Menu" but it appears below the site header image. This is frustrating, and not sure how to fix it yet. Thank you.http://www.stopbeingconfusedabouthealth.com
Yup. Looking at the mobile view in Chrome Developer Tools, I see it's sitting in the title area, as it should be.
But the title area has a width of 480 pixels and a right margin of 0.
Mobile screens generally are 414px wide at their widest - think iPhone 6/7/8 Plus.
What you want to do is make that title area less than 480 pixels wide. In fact, I wouldn't use pixels as a unit of measure on any container.
If you're not yet comfortable with contemporary CSS like flexible boxes and CSS-Grid, no problem--Genesis child themes still use traditional floats and clears, and you can make your layouts more fluid just by converting the widths to percentages.
So rather than just changing that width to, say, 300px or 240px, I'd go ahead and change it to, maybe, 50%. And since the place where you need to make that change is outside all of the media queries (styling specific to a certain screen width), that 50% will hold your image on the left side of the page no matter how wide your screen gets.
Hope that helps a little!
After ten years of writing CSS, I still have a button for CSS-Tricks on my toolbar!
Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀
© 2024 WPEngine, Inc.