mobile version bugged out

Store Design
, , ,
1

IMG_7332.png
IMG_7332.png828×1792 102 KB

IMG_7331.png
IMG_7331.png828×1792 153 KB

i have seperate banner images for desktop and mobile on my home page. for some reason the bottom of my home page on mobile only displays a large white section. I also can’t seem to get my banner on mobile to expand any further than this. Haven’t found a solution, if anyone can help that would be a godsend.

https://sypbdg-0a.myshopify.com

2

Hi,

On below css file
section-banner-image.css:

Please find the following CSS :

@media screen and (max-width: 749px) {
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 100%;
  }
}

Replace it with:

@media screen and (max-width: 749px) {
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 100vh;
  }
}

This change ensures that the banner content will take the full viewport height (100vh) instead of just 100% of its parent element on screens smaller than 749px.

3

Hey @helpmeisuck ,

Hope you’re doing well!

To make your mobile banner span the full screen height, simply follow these steps:

  1. Go to your Shopify Admin → Online Store → Themes

  2. Click “Actions” next to your live theme → Edit Code

  3. In the Assets folder, open base.css or theme.css (whichever exists)

  4. Scroll to the bottom and paste the following code:

@media screen and (max-width: 749px) {
    .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        height: 100vh !important;
    }
}

That’s it — this will ensure the banner takes up the full viewport height on mobile.

Let us know once it’s added or if you need help with anything else!

Best,
Shubham | Untechnickle

4

thank you !!

1 Like
5

hello thanks for the fast response works great!