Taste theme Banner size for mobile & desktop

Taste theme Banner size for mobile & desktop

pennyapw
New Member
5 0 0

Hi, may I know anyone know how to make the banner/photo responsive on both website/mobile view for taste theme? Thank.

Replies 5 (5)

BSS-Commerce
Shopify Expert
3477 463 527

Hi @pennyapw ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
pennyapw
New Member
5 0 0

Hi, www.mynuproject.com here you go. Thanks

BSS-Commerce
Shopify Expert
3477 463 527

Please follow these steps:
Step 1: Access Shopify Admin
Step 2: Access Online Store => Continue selecting Edit code

view - 2024-01-30T182355.465.png

Step 3: Find the file named base.css. Then scroll to the bottom of the page

view - 2024-01-30T182431.374.png

Step 4: Insert this CSS into that file

@media screen and (max-width: 750px){
  .banner.banner--content-align-center.banner--medium {
    height: 25rem !important;
  }
  .banner__media {
    height: 25rem !important;
  }
  .banner--medium:not(.banner--adapt) {
    min-height: none;
  }
}
@media screen and (min-width: 751px) and (max-width: 1000px){
  .banner.banner--content-align-center.banner--medium {
    height: 36rem !important;
  }
  .banner__media {
    height: 36rem !important;
  }
  .banner--medium:not(.banner--adapt) {
    min-height: none;
  }
}

@media screen and (min-width: 1001px){
  .banner--medium:not(.banner--adapt) {
    min-height: 56rem!important;
  }
}

Result: 

 view - 2024-01-30T182519.470.png

Hope it helps @pennyapw 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
pennyapw
New Member
5 0 0

Hi thanks for the solution, I had tried on it but still not working...

pennyapw
New Member
5 0 0

Hi, but it's no working. Any more solution? Thanks