Dawn 13.0.1 different image slider for desktop and mobile

[EliskaM]

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 😞

Thank you very much in advance!
Eli

[Dan-From-Ryviu]

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

[EliskaM]

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

[Dan-From-Ryviu]

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

[PhiviaAlexandou]

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

[Dan-From-Ryviu]

Please update the code. 

Desktop

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

Mobile

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

[webwondersco]

@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.