Hi,
my website is tomesclothes.com
I am using an image banner on the homepage, the photo is offset to make room for a button, but on mobile, it looks strange, as shown in the photos below. I was wondering if there was a way to change which photos are shown between mobile and desktop.
Hello @tomesclothes
You have to change some Html Structure
for EXAMPLE:
Replace this with a conditional statement to display different images based on the device:
Apply Custom CSS
Go to Assets/theme.css or Assets/theme.scss.liquid in your theme files.
Add the following CSS to hide and show the appropriate images based on the device:
/* Hide the mobile image by default */
.mobile-banner {
display: none;
}
/* Show the desktop image on larger screens */
@media screen and (min-width: 768px) {
.desktop-banner {
display: block;
}
.mobile-banner {
display: none;
}
}
/* Show the mobile image on smaller screens */
@media screen and (max-width: 767px) {
.desktop-banner {
display: none;
}
.mobile-banner {
display: block;
}
}
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
I don’t have either of those files. Should I make them or use theme.liquid?
And for the first line of code where do I find/ put that? For the html structure
Html In you banner image file and you can add css in theme.liquid file.
