[Resolved] White space under header when responsive

[Hassaan 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!

[Tom]

This 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.

[Hassaan Abdel Khalik]

Thank 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?

[Tom]

Background 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');
    }
}

[Hassaan Abdel Khalik]

Hi 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!

[Tom]

It’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.

[Hassaan Abdel Khalik]

I’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

[Tom]

You’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;
    }
}

[Author]

Posts