We’ve noticed that the banner image of our home page is not displayed properly on the mobile version of our site. On desktop, our homepage looks like this:
We want this banner to take 100% of the width of the mobile version. Also we want to keep the desktop version undistrubed from any changes and keep it as it is. Bellow we provide an image that demonstrates how we want the mobile version of our page to look like:
Thank you for your reply. Your suggestion is close to what we want but we also need to not have any blank space between the banner and the top menu like the one that is visible on your screenshot. Do you know how can this be fixed?
This empty space is because the banner size which you’re using at the moment is for desktop, I would suggest add a separate banner for mobile somewhere around the size of 750 × 1100 px so that it looks much cleaner and fits well on mobile.
Just simply create another section in which you’re displaying the mobile image so in total there should be 2 sections, one displaying the desktop img and the other displaying the mobile img. Once that is done then just let me know and I’ll provide you the necessary code.
we found the solution on our own. With the help of @Moeed 's code, we’ve added the following just before on our theme.liquid file: @media screen and (max-width: 767px) {
.banner__media.media.animate–fixed.scroll-trigger.animate–fade-in img {
object-fit: contain !important;
margin-top: -65%;
background: #F5F4F1 !important;
}
}
and then we’ve setted “Adapt to first image” on the banner heightn field from “image banner” from “customize your store”. We would like to thank Moeed for his contributions.
