Banner to wide on mobile

Solved

Banner to wide on mobile

TvojTatkovSyn
Tourist
7 0 2

Hey, how do i fix this problem? I tried multiple codes i found on here, none of them worked. (taste theme)

https://6ec26c-7f.myshopify.com

Screenshot 2024-10-25 at 17.00.13.png

I want it to look like this

Screenshot 2024-10-25 at 17.01.21.png

Accepted Solution (1)
BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@TvojTatkovSyn, I think you make some changes in your theme, please replace the previous code by this one

 

<style>
@media only screen and (max-width: 500px) {
#Banner-template--23806452269405__image_banner_QraQyH .banner__content {
   position: absolute!important;
}
#Banner-template--23806452269405__image_banner_QraQyH .banner__media img {
   aspect-ratio: 3/1;
   object-fit: cover!important;
   position: relative!important;
}
#Banner-template--23806452269405__image_banner_QraQyH .banner__media {
    position: relative!important;
}
}
</style>

 

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 5 (5)

BSSCommerce-B2B
Shopify Partner
1954 562 561

@TvojTatkovSyn,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
@media only screen and (max-width: 500px) {
#Banner-template--23806452269405__image_banner_QraQyH .banner__content {
   position: absolute!important;
}
#Banner-template--23806452269405__image_banner_QraQyH .banner__media img {
   aspect-ratio: 3/1;
   object-fit: cover!important;
}
}
</style>

Result on mobile:

BSSCommerceB2B_0-1729869566652.png

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

TvojTatkovSyn
Tourist
7 0 2

The banner is gone xDScreenshot 2024-10-25 at 17.26.05.png

BSSCommerce-B2B
Shopify Partner
1954 562 561

This is an accepted solution.

@TvojTatkovSyn, I think you make some changes in your theme, please replace the previous code by this one

 

<style>
@media only screen and (max-width: 500px) {
#Banner-template--23806452269405__image_banner_QraQyH .banner__content {
   position: absolute!important;
}
#Banner-template--23806452269405__image_banner_QraQyH .banner__media img {
   aspect-ratio: 3/1;
   object-fit: cover!important;
   position: relative!important;
}
#Banner-template--23806452269405__image_banner_QraQyH .banner__media {
    position: relative!important;
}
}
</style>

 

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

TvojTatkovSyn
Tourist
7 0 2

It worked!! Thanks a lot

BSSCommerce-B2B
Shopify Partner
1954 562 561

Glad to help 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