Thumbnails for mobile products 7.1

Site URL: https://www.tribeandsol.com/shop

Hi,

I was able to create thumbnails for additional photos on desktop but need help with the following:

• thumbnails to appear under the bottom on mobile right now in mobile my images swipe 

Thank you in advance for your help!

Hi,

Can you share link to product in screenshot?

5 hours ago, tuanphan said:

Hi,

Can you share link to product in screenshot?

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

No thumbnails on mobile

20 hours ago, MoonMama said:

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

 

 

No thumbnails on mobile

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

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.

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

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

You mean on mobile?

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!

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

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? 

On 11/12/2023 at 10: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;
}
}

 

Hey, im trying to add thumbnails on mobile too. I used this new code but this is how it looked like.

 Do you know how to fix it?

Thank you

On 1/22/2024 at 1:09 AM, Liel said:

Hey, im trying to add thumbnails on mobile too. I used this new code but this is how it looked like.

 Do you know how to fix it?

Thank you

Can you share site url? We can check easier

On 1/25/2024 at 5:42 AM, tuanphan said:

Can you share site url? We can check easier

Yes, sorry

https://ultra-complex.com/shop/p/skin-shorts

On 1/28/2024 at 3:12 AM, Liel said:

Yes, sorry

https://ultra-complex.com/shop/p/skin-shorts

Use this new CSS code

@media screen and (max-width:767px) {
.ProductItem-gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px !important;
}
.ProductItem-gallery-slides {
    width: 100%;
}
.ProductItem-gallery .ProductItem-gallery-scroll {
    display: flex !important;
    flex-direction: column;
}
.tweak-product-basic-item-gallery-placement-right .ProductItem-gallery {
    flex-direction: column-reverse !important;
    padding-bottom: 0px !important;
}
section.product-details.ProductItem-details {
    top: -20px;
}
.ProductItem-gallery-thumbnails>button {
    margin-right: 20px !important;
}
}

On 1/30/2024 at 11:26 AM, tuanphan said:

Use this new CSS 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;
    flex-direction: column;
}
    .tweak-product-basic-item-gallery-placement-right .ProductItem-gallery {
        flex-direction: column-reverse !important;
    }
}

 

Thank you so much! Is there a way I can add space between the thumbnails and reduce the space between thumbnails and product name? I attached an example - 

Thank you so so much,

Updated above code. You can add it again

On 2/7/2024 at 4:54 AM, tuanphan said:

Updated above code. You can add it again

Thank you! I updated it. 
How can I also add a 10px space between the main image and thumbnails?

Change this line

.ProductItem-gallery-slides {
    width: 100%;
}

to this

.ProductItem-gallery-slides {
    width: 100%;
	margin-bottom: 10px !important;
}