Liquid, JavaScript, themes, sales channels
Hi there!
If I can get some assistance with this I would be really appreciative.
I am currently running the Venue Theme. The Product page has some slight differences when viewed from a desktop compared to a mobile. The one that I am interested in getting some help with is the thumbnails that display under the main image on the Product Page when viewed from mobile.
Currently, when viewed on a mobile, the thumb nails have a horizontal scroll feature that lets you move through them. I would like to replace this with the same kind of static grid that is displayed when viewed from a desktop. I know it is a small difference but it would be awesome to get it to display like this!
Any help is hugely appreciated! Thanks very much.
This is the website: www.cartographychronicles.com
DESKTOP & MOBILE DISPLAY CURRENTLY
Solved! Go to the solution
This is an accepted solution.
Yeah just below your rule:
.product-single__photo__nav__dots.product-single__photo__nav__dots {
width: calc(100vw - 36px);
}
You can add:
.product-single__photo__nav__dots.product-single__photo__nav__dots ul {
display: contents;
}
Some CSS like:
@media screen and (max-width: 767px) {
.product-single__photo__nav__dots.product-single__photo__nav__dots {
display: contents;
}
}
Should do this if you put it at the bottom of your main css file. There are better ways, like modifying the JS for the slider library the theme is using as it should have options for this, though that would require access to the code.
Hi there!
I have already added in some code to change mobile to display thumbnails instead of a carousel. This code is on the Venue Theme website. Is there anything in here that would be easy to change to implement the change? Thanks again for the help 🙂
/*SHOW THUMBNAIL IMAGES ON MOBILE*/
@media screen and (max-width: 767px) {
.product-single__photos.product-single__photos .slick-dots .product-single__photo-thumbs__item.product-single__photo-thumbs__item {
background-color: rgba(240, 240, 240, 0.8);
width: 56px;
height: 56px;
border: 2px solid transparent;
border-radius: 0;
}
.product-single__photo-thumbs__img.product-single__photo-thumbs__img, .product-single__photo-thumbs__badge.product-single__photo-thumbs__badge {
display: inline;
}
.product-single__photo__nav.product-single__photo__nav.product-single__photo__nav {
padding: 0 0px;
}
.product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item.product-single__photo__nav__item {
display: none !important;
}
.product-single__bottom.product-single__bottom.product-single__bottom {
padding-top: 6px;
}
.product-single__photo__nav__dots.product-single__photo__nav__dots {
width: calc(100vw - 36px);
}
.product-single__photo__nav__dots .slick-dots {
white-space: nowrap;
overflow: auto;
padding-bottom: 9px;
}
.product-single__photo__nav.product-single__photo__nav {
width: 100%;
}
.product-single__photo__nav__dots .slick-dots::-webkit-scrollbar {
height: 12px;
}
.product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb {
background: #f0f0f0;
border-radius: 10px;
}
.product-single__photo__nav__dots .slick-dots::-webkit-scrollbar-thumb:hover {
background: #e4e4e4;
}
}
This is an accepted solution.
Yeah just below your rule:
.product-single__photo__nav__dots.product-single__photo__nav__dots {
width: calc(100vw - 36px);
}
You can add:
.product-single__photo__nav__dots.product-single__photo__nav__dots ul {
display: contents;
}
Hey thank you very much that has now worked! 🙂
Just a not that display: contents is currently not supported in IE 11 if you need to support that browser.
https://caniuse.com/css-display-contents
@joseph-dc wrote:Just a not that display: contents is currently not supported in IE 11 if you need to support that browser.
https://caniuse.com/css-display-contents
This is a mobile only query so I don't think that'll be an issue.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024