Separate Mobile and Desktop Banner in Dawn Theme

Shopify Discussion
1

I added the code in the thread https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-theme/td-p/1362462 and successfully separated mobile and desktop image with first and second image.

Since I use 4:3 image for desktop and square image on mobile, I cannot have them shown properly without cut out.

If I checked the box “Adapt section height to first image size” then the mobile banner will be cut, If I dont check the box then desktop banner will be cut and mobile will show properly.

Any suggestion to solve the issue?

2

Hello @tony922

I would like to give you some recommendations to support you.

Let’s try adding this code :

.banner__media+.banner__media {
object-fit:contain !important;
}

I hope the above is useful to you.
Best regards,
GemPages Support Team