Banner not properly displayed on mobile version of our page

[JH_TECH]

Hello Shopify Community,

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:

The mobile version 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:

Any ideas on how we can do this?

our page: jacqueshermes.com we use the Dawn theme (version 15.0.2)

Thank you for your time,

Jacques Hermes team

[Moeed]

Hey @JH_TECH 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.banner__media.media.animate--fixed.scroll-trigger.animate--fade-in img {
    object-fit: contain !important;
    background: #F5F4F1 !important;
}
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[JH_TECH]

Hello @Moeed 

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? 

[Moeed]

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.

Best Regards,

Moeed

[JH_TECH]

Ok, we understand. How can we have a different image for the mobile version and keep the same for desktop? Can you give us the needed code?

[Moeed]

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.

Best Regards,

Moeed

[JH_TECH · Accepted solution]

we found the solution on our own. With the help of @Moeed 's code, we've added the following just before </body> on our theme.liquid file: <style>
@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;
}

}
</style>

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.