Re: Seperate Slideshow Images On Mobile And Desktop - Refresh Theme

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
9534 1190 1529

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

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
9534 1190 1529

@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 

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
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
9534 1190 1529

@Gbasescommerce - I can see 2 images now, 

 

I believe first is for desk and 

second for mobile?

 

 

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

@suyash1 correct

suyash1
Shopify Partner
9534 1190 1529

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

God bless people like you 🙂

suyash1
Shopify Partner
9534 1190 1529

@Gbasescommerce - thank you very much. 🙂

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
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
9534 1190 1529

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

Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
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
9534 1190 1529

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