Jump to content

Thumbnails for mobile products 7.1

Recommended Posts

20 hours ago, MoonMama said:

Hi, Thumbnails on desktop https://www.tribeandsol.com/shop/p/halo-earrings

1499252933_ScreenShot2021-11-06at2_32_24AM.thumb.png.f4723083aeda55027f133f60470fd4b3.png

 

 

No thumbnails on mobile

862917104_ScreenShot2021-11-06at2_31_14AM.thumb.png.99ebca2ec692460b48c766f9e9729dfb.png

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
9 minutes ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
}
}

 

Perfect! Thank you so much.

Link to comment
  • 3 months later...
On 2/8/2022 at 12:06 AM, MoonMama said:

Hi, 

I switched up my thumbnail design and would like to tweak this code so thumbnails show up on the side and not underneath as first requested.

https://www.tribeandsol.com/shop/p/adzer-knit-jacket

Screen Shot 2022-02-06 at 11.52.37 PM.png

Screen Shot 2022-02-07 at 10.29.21 AM.png

You mean on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 11/7/2021 at 12:07 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
}
}

 

Hi! Thanks for this code, however, there are two problems with it for us. Check our product here on mobile:

https://www.blatepapes.com/shop/p/capsule-filler-100

Problem #1: Two many pictures make the thumbnails too thin. Can it be scrollable horizontally instead of becoming thinner?

Problem #2: There is a huge space below the thumbnails until the "# of Store Reviews". This only happens after adding this css code. Do you have a fix for this?

Thanks!

Link to comment
On 11/10/2023 at 8:29 AM, BlateCo said:

Hi! Thanks for this code, however, there are two problems with it for us. Check our product here on mobile:

https://www.blatepapes.com/shop/p/capsule-filler-100

Problem #1: Two many pictures make the thumbnails too thin. Can it be scrollable horizontally instead of becoming thinner?

Problem #2: There is a huge space below the thumbnails until the "# of Store Reviews". This only happens after adding this css code. Do you have a fix for this?

Thanks!

Use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px !important;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/12/2023 at 3:36 AM, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px !important;
}
.ProductItem-gallery {
    flex-direction: column-reverse;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
}
}

 

This was awesome, thanks so much. I do have one other question for you, because you seem to be very knowledgeable. We keep getting Javascript errors on our site, and I think it has to do with our countdown timer. Except I think I'm only seeing the error on pages that don't have the timer on them. The errors are in the attached picture. Our timer code we use is this:

<script>const
  CountDownZone = document.querySelector('#count-down-Timer strong'),
  TimeTarget    = 14   // 15:00hrs is the cut-off point   
  ;
function pad(n, len) { // leading 0's
  let s = n.toString();
  return '0'.repeat(Math.max(len - s.length, 0)) + s;
};

var timerRunning = setInterval(countDown, 1000);

function countDown() {
  let
    localTime = new Date(),                // get your local time
    utcTime   = localTime.getUTCHours(),  // find UTC hours
    estTime   = new Date()               // create a new date object for the EST time
    ;
    estTime.setHours(utcTime-5);        // adjust it for EST hours.


  if (
     (estTime.getDay() > 0) && (estTime.getDay() < 6)       // Monday to Friday only
  && (estTime.getHours() < TimeTarget)
     ) 
  {                     
    let
      count_HM = [],
      hrs  = (TimeTarget - 1) - estTime.getHours(),
      mins = 59 - estTime.getMinutes(),
      secs = 59 - estTime.getSeconds()
      ;

    if (hrs > 0)             { count_HM.push(hrs + ' hr'); }
    if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' min'); }
    count_HM.push(pad(secs, 2)+ ' sec');

    CountDownZone.textContent = count_HM.join('    ');
  }
  else {
    document.getElementById('count-down-Timer').textContent = 'Order Before 3PM EST Mon-Fri (12PM Sat) For Same-Day Shipping!';
    clearInterval(timerRunning);
  }
}</script>

 

And we call it on each page using this code:

 <center><div id="count-down-Timer">Time Left to Order for Dispatch Today:<br><strong>0.00.00</strong> </div>
</center> 

 

 

Do you have any idea how to solve this error? 

Clarity_Blate_Papes_JavaScript errors_11-14-2023.png

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.