Home page image looking weird on mobile

Solved

Home page image looking weird on mobile

dilaraucar
Tourist
12 0 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!

Accepted Solution (1)
DaisyVo
Shopify Partner
4460 499 596

This is an accepted solution.

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. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)
dilaraucar
Tourist
12 0 1

DaisyVo
Shopify Partner
4460 499 596

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. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
dilaraucar
Tourist
12 0 1

bodileshape.com

DaisyVo
Shopify Partner
4460 499 596

This is an accepted solution.

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. 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution