Banner image size in mobile version

[isabellemaria]

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.

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

[BSSCommerce-HDL]

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: 

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 😍

[isabellemaria]

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

[BSSCommerce-HDL]

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

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 😍

[PageFly-Henry]

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

[PageFly-Henry]

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.

[isabellemaria]

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