Banner image size in mobile version

isabellemaria
Trailblazer
181 1 24

Hi there,

 

I have a problem with my banner image size in the mobile version. How can I make that the image is displayed correctly on mobile phones? Currently it is too wide:

 

https://taneraskin.com/pages/kpguide using Dawn theme.

 

Bildschirmfoto 2024-06-06 um 22.55.33.png

 

I have the following code in section-image-banner.css:

 

@media screen and (max-width: 749px) {

.banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media,
.banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
height: 10rem; /* CHANGE; default: 39rem */
max-width: 100%; ** this is not working **
}

 

Best,

Isabelle

Replies 6 (6)

BSSCommerce-HDL
Shopify Expert
655 202 217

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

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media only screen and (max-width: 749px) {
   .banner__media img {
     object-fit: contain !important;
   }
}

Here is result: 

BSSCommerceHDL_0-1717725333913.png

Hope this can help you,

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

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

isabellemaria
Trailblazer
181 1 24

Thank you for your suggestion but this does not work at all. Do you have any other idea? 

BSSCommerce-HDL
Shopify Expert
655 202 217

Hi @isabellemaria

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

Step 2: Search file theme.liquid

Step 3: Inside body tags. You need insert my code inside it before close body tags

BSSCommerceHDL_0-1717770643141.png

 

Hope this can help you,

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

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PageFly-Henry
Shopify Partner
1132 322 275

Hi @isabellemaria 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.banner__media.media.scroll-trigger.animate--fade-in img {

    object-fit: contain !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Henry
Shopify Partner
1132 322 275

Also, I noticed that the product details section seems a bit sparse. Since you're offering a sale price, consider adding a sale badge to create a sense of urgency. Additionally, you could enhance the information by including payment methods or trust badge icons to build more trust and reassure customers.

 

PageFlyHenry_1-1717733613222.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

isabellemaria
Trailblazer
181 1 24

Thank you for your suggestion but this does not work at all. Do you have any other idea?