Added code for separate Desktop and Mobile and sliders now doesn't show on mobile - Dawn teheme

[izzy365]

I added code to our website so that we could upload separate files for the desktop and mobile site, but now the slider only shows images on desktop, when you go to mobile it doesn't show. I think because the code is set up for it to show the mobile image but it's not set up to let me add one for sliders, only mobile. I tried to see if i could add the same code for sliders but not having much luck. Could anyone help? As a side not, i also feel like the slider images are coming out a better quality on larger screens than the banner, not sure if there's something in the code reducing the image quality for the banner.

Example use of banner image with another mobile image on our homepage www.papersmiths.co.uk

Example use of slider not showing an image on mobile on our brands page - https://www.papersmiths.co.uk/pages/all-brands 

[Tal19]

in the file section-image-banner.css

there is this css: 

@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
}

Remove it or change the word none to block.

[Made4uo-Ribe]

Hi @izzy365 

Just like to clarify, you want to show only 1 slide on the mobile screen? And show all on desktop?

Im not sure which slide. But check this one. 

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

@media screen and (max-width: 749px) {
    /* 3rd slide */
div#Slide-template--17107201491186__slideshow_EfJCrM-3 {
    display: none;
}
    /* 1st slide */
div#Slide-template--17107201491186__slideshow_EfJCrM-1 {
    display: none;
}
    }

• And Save. 
• The remaining one is the 2nd slide. And please before you add the code take out first the code you added. 
• 
• This is the code you add. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[izzy365]

Sorry I have not explained it very well.

At the moment no images are showing on mobile for the slider section, because of the code that I added for the homepage banner.

For the homepage banner there is two sections where you can upload images, the first image is the desktop image, and the second is the mobile image.

Because of the fact the slider doesn't have a second image section, it means that it isn't showing an image when on mobile.

I just want it so that all the slides show with an image, currently only text is showing.

[Made4uo-Ribe · Accepted solution]

Yes, I got it. The code Ive shown you is for the banner that prevent the media image to show. Check this code below. Same Instruction.

.slideshow__media.banner__media.media {
    display: block;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[izzy365]

Thank you so much - this worked!