Hello guys,
I was able to use some code on my website from another community question, where the idea was to have two different images on my website, depending on the device the end-user is using - mobile or desktop through the image-banner section.
It works fine, the only issue is that when selecting a smaller image for the desktop and a bigger image for mobile as well selecting the option “Adapt section height to first image size” the image on the mobile cuts off. This happens as the first image (desktop image) is smaller and Shopify uses the size of the first image to decide what height to apply when the “Adapt section…” option is set to true.
Could you help me with some code so that when on desktop, the option “Adapt section…” reads the height of the image for the desktop and consequently, when on mobile, it reads the height for the mobile image?
The code I have added to the section-mage-banner.css file so far:
/*Added from Shopify Community*/
.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
The same user that suggested the code above, suggested to add the following code to fix the issue I am describing, but it does not work on my instance.
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}
}
Thank you in advance!