- This topic has 2 replies, 3 voices, and was last updated 6 years, 3 months ago by
.
-
Posts
-
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.comYup. 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!
Two great places to learn about CSS are CSS-Tricks and Codrops.
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. 😀
find bootstrap header
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.