Custom CSS resizes Mobile Header but leaves gap in content

  • Resolved bbrightmagazine

    (@bbrightmagazine)


    3 years, 10 months ago

    I’ve used this code in my Custom CSS for my mobile site as suggested on these forums:

    @media (max-width: 480px) {
    .header-filter {
    background-size: contain;
    background-repeat: no-repeat;
    }
    }

    however now there is a gap between the big title section and my about section. I don’t know how to adjust the padding or call the about section in order to move it up on the page, and I fear if I do there will be a gap between it and the footer. How do I fix this?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • I am having the same problem. The website on a desktop looks fine but when the website is viewed on a mobile phone (in portrait mode), there is grey padding above and below the image. The website is https://www.northrydescouts.org/

    Any help would be greatly appreciated.

    Thread Starter bbrightmagazine

    (@bbrightmagazine)

    There is a user above this post in the forums who has managed to swap out a separate image for their mobile site but I can’t get it to work for me. I may need to switch away from Hestia in the next few days if this doesn’t get fixed, I have a business and I need the mobile site to look professional.

    Hi @bbrightmagazine,

    Can you please check the following documentation, and check different images on mobile devices afterwards?

    https://docs.themeisle.com/article/1326-change-the-big-title-background-image-on-smaller-screen-sizes-in-hestia

    Let us know if it worked.

    Thread Starter bbrightmagazine

    (@bbrightmagazine)

    It seems like it is calling the new image, however the image resize isn’t working, so the smaller image is zoomed in and pixellated ??

    Hi @bbrightmagazine,

    The Big Title section is designed to be a full-width section and as a result, the background image is designed to cover the entire section, from top to bottom. This is the reason why the same big image can’t look exactly the same on every device. A small mobile device will not have the physical possibilities to display the entire picture, at the same time keeping the image ratio and all its properties. This is why, with some images, on mobile devices, some portions of the image may not be visible.

    If you would like the full image to appear on mobile, then you can apply the code but expect that the gray areas will be there as the code is to contain the full image so you can see everything not to cover the entire section.

    Hope that makes sense.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom CSS resizes Mobile Header but leaves gap in content’ is closed to new replies.