Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Display product images as slideshow while stacked on desktop


Adeleta

Question

Is there a way to display product images as slideshow on mobile, but to stay stacked on desktop?

 

I'm using Clay template (Brine template family)

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

11 answers to this question

Recommended Posts

  • 0
On 8/15/2020 at 10:56 PM, Adeleta said:

https://kidsofapril.com/collection/rainbow-speckle-chunky-sweater-natural

 

Password: KOA2020

Now in Site Styles "Slideshow" is enabled. I'd like this display to be on mobile and tablets, but on desktop - a stacked image view. 🙂

Add to Home > Design > Custom CSS

@media screen and (min-width:901px) {
.ProductItem-gallery-slides-item.sqs-pdp-gallery-slide {
    position: relative;
    opacity: 1;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

For other members, add to Home > Design > Custom CSS

/* Stacked image on desktop */
@media screen and (min-width:901px) {
.ProductItem-gallery-thumbnails-item {
    height: auto !important;
    display: block;
    margin-right: 0 !important;
    width: 100%;
}
.ProductItem-gallery-thumbnails-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/17/2020 at 10:36 AM, tuanphan said:

For other members, add to Home > Design > Custom CSS


/* Stacked image on desktop */
@media screen and (min-width:901px) {
.ProductItem-gallery-thumbnails-item {
    height: auto !important;
    display: block;
    margin-right: 0 !important;
    width: 100%;
}
.ProductItem-gallery-thumbnails-item img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
}

 

Hoping you can help me with this as well. I want to do the same thing, but I've already added some code to make the product info sticky on desktop while I scroll. I think it's interfering with your code & pushing my photos down. 

https://disc-greyhound-adws.squarespace.com/shop-all/single-anthurium-print

Here's the code I currently to make the info sticky:

.ProductItem-gallery-slides {
@media screen and (min-width: 769px)
{
    width: 45vw;
    overflow: visible !important;
}
}
.ProductItem-details {
      position: -webkit-sticky;
      position: sticky;
    top: 0;
        padding-top: 10vw;

}

Link to post
  • 0
8 hours ago, amymmcneil said:

Hoping you can help me with this as well. I want to do the same thing, but I've already added some code to make the product info sticky on desktop while I scroll. I think it's interfering with your code & pushing my photos down. 

https://disc-greyhound-adws.squarespace.com/shop-all/single-anthurium-print

Here's the code I currently to make the info sticky:

.ProductItem-gallery-slides {
@media screen and (min-width: 769px)
{
    width: 45vw;
    overflow: visible !important;
}
}
.ProductItem-details {
      position: -webkit-sticky;
      position: sticky;
    top: 0;
        padding-top: 10vw;

}

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (min-width:768px) {
.ProductItem-gallery-slides:before {
    padding-bottom: 20% !important;
}
}

 

Thank you!!!!!!!!!!!

Link to post
  • 0
40 minutes ago, tuanphan said:

It seems header overlap product title on mobile. Do you want to fix?

Wow yes please I was just going to ask! Mobile header a bit too close to the top too. 

Also tablet is showing the slideshow but I think it'd like that stacked too.

Link to post
  • 0
On 11/17/2020 at 8:52 PM, amymmcneil said:

Wow yes please I was just going to ask! Mobile header a bit too close to the top too. 

Also tablet is showing the slideshow but I think it'd like that stacked too.

Hi. Sorry for the delay. It look likes you solved?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...