Can someone help me make the “second image” strictly for mobile and the “first image” strictly for desktop?
What code do I have to add
Topic summary
A user seeks help implementing responsive image banners that display different images based on device type—one for desktop and another for mobile.
Proposed Solution:
- Set up both images in the Image Banner section via the theme customizer (Online Store > Themes > Customize)
- Add custom CSS code to the base.css file (Online Store > Themes > Edit code)
- Use media queries to control visibility: hide the first image on mobile (max-width: 750px) and hide the second image on desktop (min-width: 751px)
- Apply
width: 100% !importantto ensure proper banner sizing
Technical Details:
The CSS targets .banner__media-half elements using :first-child and :nth-child(2) selectors with display: none properties at different breakpoints.
Note: The provided code snippet appears partially corrupted or reversed in the original post, but the methodology is clear.
Hi @HOUSEOFX ,
You can follow these step:
Step 1: Go to Online store > Themes > Customize > Set up Image banner with first and second image
Step 2: Go to Online store > Themes > Edit code and find base.css file
Step 3: Insert below code at the end file and Save them
@media screen and (max-width: 750px) {
.banner__media-half {
width: 100% !important;
}
.banner__media-half:first-child {
display: none
}
}
@media screen and (min-width: 751px) {
.banner__media-half:nth-child(2) {
display: none
}
.banner__media-half {
width: 100% !important;
}
}