MoonMama Posted November 2, 2021 Share Posted November 2, 2021 (edited) 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! Edited November 2, 2021 by MoonMama removed text Link to comment
tuanphan Posted November 6, 2021 Share Posted November 6, 2021 Hi, Can you share link to product in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MoonMama Posted November 6, 2021 Author Share Posted November 6, 2021 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 Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 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; } } MoonMama 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
MoonMama Posted November 7, 2021 Author Share Posted November 7, 2021 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
MoonMama Posted February 7, 2022 Author Share Posted February 7, 2022 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 Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BlateCo Posted November 10, 2023 Share Posted November 10, 2023 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
tuanphan Posted November 12, 2023 Share Posted November 12, 2023 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BlateCo Posted November 14, 2023 Share Posted November 14, 2023 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? Link to comment
Liel Posted January 21 Share Posted January 21 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 Link to comment
tuanphan Posted January 25 Share Posted January 25 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Liel Posted January 27 Share Posted January 27 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 Link to comment
tuanphan Posted January 30 Share Posted January 30 (edited) 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; } } Edited February 7 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Liel Posted February 5 Share Posted February 5 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, Link to comment
tuanphan Posted February 7 Share Posted February 7 Updated above code. You can add it again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Liel Posted February 7 Share Posted February 7 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? Link to comment
tuanphan Posted February 11 Share Posted February 11 Change this line .ProductItem-gallery-slides { width: 100%; } to this .ProductItem-gallery-slides { width: 100%; margin-bottom: 10px !important; } Liel 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment