Different homepage banners for mobile and desktop - XMPieLab/uStore-NG GitHub Wiki

The homepage banner can be set in the theme editor (Store Settings > Customize Theme) and it will be used for desktop and mobile.
Being responsive it will have a fixed height (that you can change) and the width will shrink as you get to a smaller screen size, losing details in the sides of the image.
If these details are important, you may want to use different images for different screen sizes, especially for desktop and mobile.

This is how to do it:
Upload 2 images via the theme editor's Assets section, let's assume DesktopBanner.png and MobileBanner.png.
In the Custom CSS add this snippet:

@media (min-width:1px){
    :root{
        --homepage-carousel-slide-1-image: "assets/MobileBanner.png";
    }
}

@media (min-width:1200px){
    :root{
        --homepage-carousel-slide-1-image: "assets/DesktopBanner.png";
    }
}

There is a small limitation for this method, it will change the image only when you load the page, but not if you resize the page manually.
This is due to the method of loading the css variable's content to the HTML.