Hello Community 
we are using the refresh theme, how can we display a specific image for the hero section on desktop and have an adjusted version (slightly different image) for the mobile displaying?
solution should not slow down page speed.
link to preview: https://fo68e6svg3jpprqu-61049766108.shopifypreview.com
Hi @PhMA
Adding separate images for desktop and mobile will always affect your page speed slightly, but not significantly.
Or you can add this code to Custom CSS of your Image banner section to change your image on mobile to appear the same on the desktop
@media (max-width: 749px) {
.banner__media { height: 16rem; }
.banner__media img { object-fit: contain; }
}
In case you want to display separate images for mobile and desktop, you can create 2 image banner sections and add code below to the Custom CSS of each section to hide the mobile section on the desktop and vice versa.
Desktop’s image banner section
@media (max-width: 767px) {
.banner { display: none !important; }
}
Mobile’s image banner section
@media (min-width: 768px) {
.banner { display: none !important; }
}
