I am using version 7.0.1 of Dawn theme. I’ve created image banners for the desktop site, but I don’t want image banner sections to appear on the mobile site. How can I do it?
Topic summary
Goal: hide Image Banner sections on mobile in Shopify’s Dawn theme (v7.0.1).
Proposed approaches:
- Add a “desktop” class to each banner’s section and use a CSS media query to hide images below ~767px. This requires editing each banner and targets images only.
- Add a CSS rule in base.css targeting section IDs containing “__image_banner” below ~990px to hide the whole section. Reported to hide only the first banner; subsequent banners still appeared.
- Add a CSS rule hiding elements with the .banner class below ~749px (with !important) to remove all banners on mobile. A video tutorial was also shared for using different images per device.
New requests emerged:
- How to hide an image banner on mobile for the Origin theme (theme-specific selectors needed).
- How to hide only the second image banner on mobile while keeping the first in Dawn (selective targeting needed; a screenshot was provided).
Status: Partial success; no confirmed universal fix for all banners. Open questions remain on theme-specific selectors and per-banner/mobile-only control.
1 Like
@serhatsalih hii i show your post.
Just added one class in section like
(added desktop class in section)
//here the img code
@media (max-width: 767px){
.desktop img {
display:none;
}
}
2 Likes
Thank you for your reply but I don’t want to hide a specific image banner. I want to hide all image banner sections. Does this code works for it?
Yes!! @serhatsalih it will work
Add this code at the bottom of Theme > edit code> assets > base.css file
@media screen and (max-width: 990px) {
section[id*="__image_banner"] {
display: none;
}
}
let try it and let me know
It worked for the first image banner but second and third image banners still appear on mobile view. I have shared my store url and password on DM
@serhatsalih Didn’t receive any DM from your end
Hi @serhatsalih
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
@media(max-width: 749px){
.banner {
display: none!important;
}
}
An other way, if you want to make the image show different on desktop and mobile, you can try follow this video: https://youtu.be/vfY6G35SlEE
Tell me pls what code i need for theme ORIGIN I need to hide block image banner from the mobile version and leave it only in the desktop version?
