- This topic has 7 replies, 2 voices, and was last updated 8 years, 5 months ago by Tom.
-
AuthorPosts
-
November 14, 2015 at 1:14 pm #153068Hassaan Abdel Khalik
Hello,
When my website is responsive, a large white space appears under my header. I’m a bit of a newb and couldn’t find code etc. to fix this.
My website is: http://www.hassaan.ca
You can check it out responsive through this website: http://www.studiopress.com/responsive/
Much thanks!
November 14, 2015 at 10:12 pm #153147TomLead DeveloperLead DeveloperThis is happening because you’re using padding to show the entire header background image.
The background image is set to 100% width, so as you resize down the height lessens to keep the aspect ratio.
Try setting the background image size to “Cover” instead.
November 14, 2015 at 10:21 pm #153151Hassaan Abdel KhalikThank Tom! But when I did that only part of my header shows and the rest is cut off. The white space is gone tho! What should I do to show the entire header photo in the responsive view?
November 14, 2015 at 10:23 pm #153153TomLead DeveloperLead DeveloperBackground images are super tricky on mobile, as it all has to do with aspect ratio.
Your header is much taller on mobile because of the padding, so the aspect ratio is off.
You can set your size to cover only on mobile or add a mobile specific image with a better aspect ratio:
@media (max-width: 768px) { .site-header { background-size: cover; background-image: url('CUSTOM URL TO MOBILE IMAGE WITH CORRECT ASPECT RATIO'); } }
November 15, 2015 at 3:35 pm #153305Hassaan Abdel KhalikHi Tom,
Sorry for the change up, but I tried to upload the picture as a background image for a row in PageBuilder so I can add text and buttons (still looks like a header). I’m still having the same issue and was wondering if you have any css code to make the pagebuilder row’s image responsive?
Thank you!
November 15, 2015 at 9:41 pm #153348TomLead DeveloperLead DeveloperIt’s the same issue as I stated above – the Page Builder has the same restrictions as GP because that’s just the way the CSS works with the images – no magic for it unfortunately.
Your best bet is to use a different image on mobile with an aspect ratio closer to what you’re working with using the CSS I provided above.
November 16, 2015 at 11:43 am #153561Hassaan Abdel KhalikI’ve used this code:
@media (max-width: 768px) {
.first-row-home {
background-size: cover;
background-image: url(http://hassaan.ca/wp-content/uploads/2015/11/IMG_7825-edit121.jpg);
}
}Giving the row in page builder the css class .first-row-home without avail. Does my code make sense? I’m trying to put together what I’m learning to apply to this scenario.
Sorry for the coding incompetency :s
November 16, 2015 at 11:11 pm #153647TomLead DeveloperLead DeveloperYou’ll need to add !important to them as the plugin adds the values to the inline element.
@media (max-width: 768px) { .first-row-home { background-image: url(http://hassaan.ca/wp-content/uploads/2015/11/IMG_7825-edit121.jpg) !important; } }
-
AuthorPosts
- You must be logged in to reply to this topic.