Dawn 13.0.1 different image slider for desktop and mobile

Store Design
, ,
1

Hello everyone,

Would any of you have any advice on how to make it so that I can choose different image sizes separately for the mobile version and separately for the desktop version?
Not only is it unsightly, but the mobile version shows me a huge speed bump because of it.
I found a lot of tutorials but none of them worked so far :disappointed_face:

Thank you very much in advance!
Eli

2

Hi @EliskaM

You can create separate image banner sections and then

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;
}
}

Screenshot 2024-03-21 at 14.43.28.png
Screenshot 2024-03-21 at 14.43.28.png2006×1063 218 KB

3

@EliskaM Hope you are doing well.

For that, you have to update some code in your theme. you have to give 2 different options for mobile and desktop and hide/show it accordingly.

It requires some custom code changes to achieve.

4

Hey Dan,

thank you very much for your help. I would like to change it at the main slider on home page. Could you please advise me where exactly I can add that code?

My store url: https://krasopiska.cz

5

Hi @EliskaM

Please use this code

Hide slideshow on the mobile

@media (max-width: 749px) {
.slideshow {
    display: none !important;
}
}

Hide slideshow on the desktop

@media (min-width: 768px) {
.slideshow {
    display: none;
}
}
6

this works, but the slideshow button appears x2 times now because of the second slideshow section, how do we fix that?

7

Please update the code.

Desktop

@media (max-width: 749px) {
slideshow-component {
    display: none !important;
}
}

Mobile

@media (min-width: 750px) {
slideshow-component {
    display: none !important;
}
}