[Resolved] White space under header when responsive

Home Forums Support White space under header when responsive

  • This topic has 7 replies, 2 voices, and was last updated 5 years ago by Tom.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #153068
    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!

    #153147
    Tom
    Lead Developer
    Lead Developer

    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.

    #153151
    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?

    #153153
    Tom
    Lead Developer
    Lead Developer

    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');
        }
    }
    #153305
    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!

    #153348
    Tom
    Lead Developer
    Lead Developer

    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.

    #153561
    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

    #153647
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.