Seperate Slideshow Images On Mobile And Desktop - Refresh Theme

Store Design
,
1

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)

2

@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

3

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?

4

@Gbasescommerce - I can see 2 images now,

I believe first is for desk and

second for mobile?

5

@suyash1 correct

6

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

@suyash1 thanks but unfortunately it is not really working →

Gbasescommerce_0-1668445182150.png
Gbasescommerce_0-1668445182150.png1074×830 40.9 KB

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

8

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

God bless people like you :slightly_smiling_face:

10

@Gbasescommerce - thank you very much. :slightly_smiling_face:

11

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

12

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

13

Should this still work?

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

Any suggestions?