Image Banner Distorted

Store Design
1

I am using Dawn version 14. The image banner on my homepage is too wide for mobile. I searched and followed the advice of inserting a code above the body tag but it distorted the image. Could you take a look? binneandbopperdesigns.com

2

Hi @jcahill

I just like to take a look but the URL provide didnt match any store. Would you mind to share the preview instead? Thanks!

3

Hi it is binnieandbopperdesigns.com
Thank you!

4

Gah, I’m so sorry. binnieandbopperdesigns.com

5

Thanks for the info, I try to change the fit of the image. This is atleast I can do. You need to edit the width of the images since it would be smaller on the mobile.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
div#Banner-template--17925856264450__image_banner .media>img {
    object-fit: inherit;
}
}

And save.

Result:

Made4uoRibe_0-1716563958246.png
Made4uoRibe_0-1716563958246.png629×590 238 KB

And if you like to change the image banner to mobile and desktop you can use this code.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

I appreciate your help, but the image still looks distorted when I use this code.

7

I just figured it out. All set. Thank you so much for taking the time to help.

8

Hey I’m going through a similar issue, can you tell me what was the solution to your problem?