Banner not properly displayed on mobile version of our page

Store Design
, , ,

Topic summary

A Shopify store using the Dawn theme (v15.0.2) encountered a banner display issue on mobile devices. The banner wasn’t utilizing the full width of the mobile screen and had unwanted spacing.

Initial Solution Attempt:

  • A community member provided CSS code to be added to theme.liquid above the </body> tag
  • This partially resolved the width issue but left blank space between the banner and top menu

Root Cause:

  • The spacing issue stemmed from using a desktop-sized banner image on mobile
  • Recommendation was to create a separate mobile banner (~750 × 1100 px) in a dedicated section

Final Resolution:

  • The store owner independently developed a custom CSS solution combining the initial code with additional styling
  • Applied object-fit: contain, negative top margin (-65%), and background color adjustments within a mobile media query
  • Set banner height to “Adapt to first image” in the theme customization settings

Status: Issue resolved through custom CSS implementation.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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:

Desktop version of our site
Desktop version of our site1902×883 218 KB

The mobile version looks like this:

Mobile version of our site
Mobile version of our site720×1601 148 KB

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:

desired state of our mobile page
desired state of our mobile page720×1601 191 KB

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

1 Like
2

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 tag

RESULT:

Moeed_0-1746167942558.png
Moeed_0-1746167942558.png369×670 123 KB

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

Best Regards,
Moeed

1 Like
3

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?

1 Like
4

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

1 Like
5

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?

1 Like
6

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

7

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.