Different images for mobile than desktop web

Store Design
14

Hi @Ninthony ,

I’m using the theme Minimal with Flexslider with my website www.narrawatches.com, and I’m also a beginner at liquid and coding in general. I think I was able to mostly follow the code logic for Slickslider in Debut, wherein I was able to show the mobile image picker on theme customizer and I was able to except for the last part in the theme.scss, particularly this part

.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: block;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: none;
}
.hero {
height: auto;
}

@media (max-width:750px){
.slick-slide .hero__image-content img.hero__image.hidden-mobile {
    display: none;
}
.slick-slide .hero__image-content img.hero__image.hidden-desktop {
    display: block;
}

}

I can’t seem to replicate this in Flexslider or figure out the necessary code that would hide the second slideshow banner for flexslider.

Basically the current end result is me having one slideshow directly below the other slideshow, with the main image showing on all formats, including mobile view as I haven’t been able to bring out the mobile view on mobile screens or hide the other slideshow in the assets theme.

Any help would be greatly appreciated! Thank you and I also learned quite a lot reading this thread.