- This topic has 2 replies, 2 voices, and was last updated 8 years, 3 months ago by
.
-
Posts
-
Hi all,
I'm using Lifestyle Pro for my blog, and I made a couple small changes to increase the height and width of the header image (changed height to 300 and width 1140 in functions.php and changed padding to 0 and min-height to 300 in style.css).
It looks great on desktop, but there's a ton of white space above and below the header image on mobile. Also on a tablet, the navigation bar gets messed up (which you can see in this screenshot).
Is anyone able to help? I've spent ages trying to figure this out, and nothing has worked!
Thank you!
http://www.passionsandplaces.comUse a mobile test site like http://semalt.design/. Use your browser's inspect tool and adjust the CSS for the media queries to your liking.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?That site is great, thank you! I'm looking at the media queries in Style.css. Each device/size would need custom settings, is that right? My current code has sections for max-width of 1139px, 1023px, and 767px. Also, is this the line that would need to change to remove the white space (this code currently only appears under the section for max-width of 1023px)?
.site-header {
padding: 20px 0;
}Thank you!
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.