Make banner larger on mobile

Store Design
, , , ,
1

Make banner larger in height so it covers the whole homepage, just like the desktop version. Thanks!

https://misteri.ca

IMG_0214.png
IMG_0214.png1179×2556 426 KB

IMG_0648.png
IMG_0648.png2360×1640 539 KB

2

Hi @MiguelMaya

To change the height of the banner on mobile, follow these steps

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file section-iamge-banner.css. Search for the following CSS snippet

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

The number 39rem is currently limiting the maximum height that the banner can achieve. Please change it to a different number; here, I’ve chosen the number 67rem.

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

Result

BSSCommerceB2B_0-1720841507938.png
BSSCommerceB2B_0-1720841507938.png633×844 294 KB

Then the issue of the text moving up will disappear.

If it helps you, please like and mark it as the solution.

Best Regards

1 Like
3

looks neat. Can i add more space between the title and the button, still staying centered? Thanks!

4

Hi @MiguelMaya

Of course. Still in the file section-image-banner.css and add this code snippet to the end of the file

@media screen and (max-width: 750px) {
  .banner__heading {
    transform: translateY(-45px);
  }
}

Result

BSSCommerceB2B_0-1720929141058.png
BSSCommerceB2B_0-1720929141058.png653×777 343 KB

Change the number -45 to see the difference.

If it’s helpful, please like and mark it as a solution, thank you