I am having problems with my site. I am trying to have the banner be image 1 on desktop and image 2 on mobile but with the one on desktop being fixed to the background. I am using the Dawn theme.
d4a48f-29.myshopify.com
raobai
Hi @PourStudios
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: Go to Assets > section-image-banner.css and paste this at the bottom of the file:
.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;
}
}
Then the first image will be desktop banner, second one will be in mobile
Hope this can help you solve the issue
Best regards,
Richard | PageFly
This didn’t work for me.
Hi @PourStudios
You can create 2 separate image banner sections and then add this code to Custom CSS code of the section you want to hide on the mobile.
@media (max-width: 749px) {
.banner {
display: none !important;
}
}
Add this code to the Banner section you want to hide on the desktop.
@media (min-width: 768px) {
.banner {
display: none;
}
}
From the customize page:
-
Create an image banner and add only the first image
-
Scroll all the way down to “Custom CSS”, add the following:
@media (max-width: 749px) {
[id] {
display: none;
}
}
-
Add another image banner. This one will be for mobile devices only.
-
Scroll to “custom CSS” again, add this code:
@media (min-width: 750px) {
[id] {
display: none;
}
}
Now you have two banners, one for desktop devices and the other for mobile devices.
If it helps you don’t forget to like and accept as solution to help me out! Thanks.
Kind regards,
Diego