Why isn't my mobile banner image displaying correctly?

Store Design

Topic summary

A user is attempting to display different banner images for desktop and mobile devices but encountering issues where the mobile image doesn’t appear correctly. Despite adding CSS code to the section-image-banner.css file in the assets folder, the desktop banner continues to show on mobile devices instead of the intended mobile-specific image.

Technical approach:

  • CSS uses media queries to hide the first banner image on screens under 749px width and display a second image instead
  • The code appears correct in the theme customizer but fails during actual mobile preview

Current status:

  • Desktop display is working (not showing the second image as intended)
  • Mobile preview shows the wrong image (desktop version instead of mobile version)
  • User has uploaded images to two separate areas in the banner section
  • A community member provided CSS code, but it matches what the user already implemented

Unresolved question: The user seeks clarification on whether additional code placement beyond the assets folder is required to make the mobile banner function properly.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi, I saw this was answered about a year ago, I tried it and the image is not populating on mobile, could you please advise what i did wrong?

Code I added to assets, section-image-banner.css

.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;
	}
}

I saved it, and its doing something because I uploaded an image to the second area and it is not showing in desktop, so half the work is done. and here is the site I tried it on so I did not mess up the live site-

https://e2bzvzynxqmrjpi7-79280701732.shopifypreview.com

LIVINGSIMPLY_1-1691707170929.png
LIVINGSIMPLY_1-1691707170929.png2037×876 209 KB

2

I added the second code and I can see it in the customize mode but when I preview with my mobile device is shows the desktop banner. Does anyone know why, and how I can fix it?

LIVINGSIMPLY_0-1691708311395.png
LIVINGSIMPLY_0-1691708311395.png1800×915 175 KB

3

Stop replying to content, scammers are not tolerated on here!

4

Hello @LIVINGSIMPLY ,

The code you use is related to manage the display of banner images in a responsive manner. It’s designed to show a different image on mobile devices and hide one of the images on smaller screens. You can add this code in the Assets folder

.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;
    }
}

Hope this can help.

Transcy

5

I’m trying to show a different image for mobile that desktop. It’s not optimizing how it should. So it will be easier to have two separate banners/images.

the code you gave me will do this? Where in the assets folder do I put it?

6

Sorry I realized the code you gave me is what I already input into my assets folder, in the banner, as stated in my original question, am I supposed to put it somewhere as well?