Home page image looking weird on mobile

Shopify Discussion
1

Hello,

Im using Dawn theme. On the home page the home pages first image looks good on desktop but looks weird on smaller screen sizes. When ive used other themes in the past they where options to put a different image for mobile screens. It dont seem to be possible in the dawn theme.

Does anybody know how to work around this or have had similar problems and found a solution?

Thank you in advance!

2

Hi @dilaraucar

May I know your store domain for further investigation?

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

3

bodileshape.com

4

www.bodileshape.com

5

Hi @dilaraucar

Thank you for sharing it. You can follow our steps below to customize the image as requested:

Step 1: Go to your Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there. Then save the change

Here is the code:

@media screen and (max-width: 600px){
.banner__media > img {
    width: 100% !important;
    height: auto !important;
}
.banner__media {
    height: 220px !important;
}
div.banner.banner--content-align-center.banner--content-align-mobile-center {
    height: 220px !important;
}
.banner__content {
    min-height: unset !important;
}
}

Then it will look like this on Mobile view: https://prnt.sc/MW-Rr-RnmO-b

Please let me know if it works. Thank you so much!

Best,

Daisy - Avada Support Team.