Re: Make banner larger on mobile

Solved

Make banner larger on mobile

MiguelMaya
Excursionist
46 0 4

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

 

https://misteri.ca

 

IMG_0214.pngIMG_0648.png

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1790 548 608

This is an accepted solution.

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

Then the issue of the text moving up will disappear.

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

Best Regards

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 3 (3)

BSSCommerce-B2B
Shopify Partner
1790 548 608

This is an accepted solution.

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

Then the issue of the text moving up will disappear.

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

Best Regards

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

MiguelMaya
Excursionist
46 0 4

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

BSSCommerce-B2B
Shopify Partner
1790 548 608

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

 

Change the number -45 to see the difference.

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

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now