Solved

Seperate Slideshow Images On Mobile And Desktop - Refresh Theme

Gbasescommerce
Tourist
15 0 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)

Accepted Solution (1)
suyash1
Shopify Partner
9372 1168 1505

This is an 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;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
9372 1168 1505

@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 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Gbasescommerce
Tourist
15 0 1

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
Shopify Partner
9372 1168 1505

@Gbasescommerce - I can see 2 images now, 

 

I believe first is for desk and 

second for mobile?

 

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Gbasescommerce
Tourist
15 0 1

@suyash1 correct

suyash1
Shopify Partner
9372 1168 1505

This is an 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;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Gbasescommerce
Tourist
15 0 1

God bless people like you 🙂

suyash1
Shopify Partner
9372 1168 1505

@Gbasescommerce - thank you very much. 🙂

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Gbasescommerce
Tourist
15 0 1

@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
Shopify Partner
9372 1168 1505

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Superkeno82
Visitor
1 0 0

Should this still work? 

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

Any suggestions? 

suyash1
Shopify Partner
9372 1168 1505

@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;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Gbasescommerce
Tourist
15 0 1

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

Gbasescommerce_0-1668445182150.png

 

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