Seperate Slideshow Images On Mobile And Desktop - Refresh Theme

[Gbasescommerce]

Hello everyone,

I am currently using the "Refresh Theme" and on my main page I have an "slideshow" displayed where I have added an image (size: 2160x3840px) which works perfectly for the mobile version. For desktop it is unfortunately anything but suitable.

Now the question: Could someone help me, which code I have to insert where, so that the size adjusts automatically for the desktop version?

Thanks in advance
Fabian

(ps: my store: www.rabdeals.com

and the slideshow code: https://codefile.io/f/jKUxmfFy0gp48HwPpQFB)

[suyash1]

@Gbasescommerce - create 2 completely separate images for desk and mobile

then add 2 slider sections on home page, 1 with desk images and 1 with mobile images

then using css we can hide one of the sliders as per the view 

[Gbasescommerce]

Hi @suyash1 

thanks for the fast reply! I created the same picture for Desktop in the size 3840x2160 and created a second slider. But how can I now hide one slider per view?

[suyash1]

@Gbasescommerce - I can see 2 images now, 

I believe first is for desk and 

second for mobile?

[Gbasescommerce]

@suyash1 correct

[suyash1 · Accepted solution]

@Gbasescommerce my mistake, the media query where it is min-width:749px should be

max-width:749px , so it becomes

@media screen and (min-width:750px){
#shopify-section-template--16663645094112__1ae61c78-130c-429b-a20c-0b086ad6ad2c{display:none; visibility:hidden;}
}

@media screen and (max-width:749px){
#shopify-section-template--16663645094112__fc750faf-1ed4-4c8a-a2b3-99ed9bc56e79{display:none; visibility:hidden;}
}

[Gbasescommerce]

God bless people like you 🙂

[suyash1]

@Gbasescommerce - thank you very much. 🙂

[Gbasescommerce]

@suyash1

but how did you get this ID ->

#shopify-section-template--16663645094112__fc750faf-1ed4-4c8a-a2b3-99ed9bc56e79

so that I can do this in the future even with image banners?

[suyash1]

@Gbasescommerce - by right clicking and inspect element, you can get id and yes using it you can do it in future too

[Superkeno82]

Should this still work? 

I cant seem to get it to work on my store. 

Any suggestions? 

[suyash1]

@Gbasescommerce - please add this css to the very end of your base.css file and check, it is for these 2 sections only, if you add new one then this code will not work on it

@media screen and (min-width:750px){
#shopify-section-template--16663645094112__1ae61c78-130c-429b-a20c-0b086ad6ad2c{display:none; visibility:hidden;}
}

@media screen and (min-width:749px){
#shopify-section-template--16663645094112__fc750faf-1ed4-4c8a-a2b3-99ed9bc56e79{display:none; visibility:hidden;}
}

[Gbasescommerce]

@suyash1 thanks but unfortunately it is not really working ->

on mobile I now see both images and on Desktop there is no slideshow anymore :?