All things Shopify and commerce
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!
Solved! Go to the solution
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.
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.
bodileshape.com
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.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025