White space between 'banner' and 'slogan' sections

  • Resolved ollyc2016

    (@ollyc2016)


    8 years, 6 months ago

    The issue I am having is that when the screen sized is reduced, the elements are not fixed in place and there appears to be large white gaps between sections. I am unsure on how to fix this without making some major edits.

    You can see my site here https://www.fast-protein.com

    If you reduce the side you can see the white space forming where as it wasn’t there when you look on the page on a desktop at full size. This issue is mainly a problem when people view the site on tablets or phones as there is a big gap which looks horrible.

    Please can someone help me with a fix?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter ollyc2016

    (@ollyc2016)

    Don’t worry I have fixed this now by removing the background video, it seems that was causing the issue. Instead I am now using a background image instead and then added an override to my CSS so that image would scale down for mobile and tablets etc.
    In case it helps anyone here is the CSS I used;

    #home {
    width: 100%;
    height: auto;
    background-image: url(‘PUT THE URL FOR YOUR IMAGE HERE’);
    background-repeat: no-repeat;
    background-size: cover;
    }

    I have the same problem only on mobile devices, but I just don’t understand why this CSS modification is necessary. I set no video background and no slider on home page. In this case banner section background image is displayed – as you also noticed – incorrectly. It is not resizing and leaving a huge whiteb gap between the banner section and the slogan. This particular proble should be fixed. How could I do that?

    section.home-section-1 {
    background: url(https://.../wp-content/themes/onetone/images/home-bg01.jpg) no-repeat top center scroll;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘White space between 'banner' and 'slogan' sections’ is closed to new replies.