Hello,
Wondered if anyone could help with the following problem.
I have been trying to get separate banner images to display for desktop and mobile however I have been unsuccessful, can someone who knows the code help out?
Appreciate any support.
Topic summary
Issue: Need different banner images for desktop and mobile in the Ride theme landing page.
Attempted fix: A linked YouTube tutorial was suggested but did not work for the requester.
Working solution: Create two separate Image Banner sections—one intended for desktop, one for mobile. Use CSS media queries (rules that apply at specific screen widths) to control visibility:
- For the section to hide on mobile: apply a max-width 749px rule to set its banner element to not display.
- For the section to hide on desktop: apply a min-width 768px rule to hide its banner element on larger screens.
This effectively shows only the appropriate banner per device type.
Outcome: The requester confirmed this approach worked and found it simpler than other methods.
Status: Resolved; no further action requested.
1 Like
Hi @Glowsmith
Check this one.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you but that didn’t work for me.
Hi @Glowsmith
You can add 2 separate image nanner sections and then add those codes to make them appear separately for mobile and desktop.
Add this code to Custom CSS code of the section that 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;
}
}
1 Like
Fantastic! That solution was much simpler than most of the others I came across.
Thank you for your help, very much appreciated.
1 Like
Happy I could help 