Simple theme
thumbnail on mobile, if when there are 2 or 4 sheets the size is large, so I want to align it with when other sheets.
This is best style on 2 and 4 photos.
If I remove {% when 4 %}
{% assign thumbnail_width = ‘small–one-half medium-up–one-quarter’ %}, it works good only for desktop but it doesn’t change on mobile.
About {% when 2 %}〜, it works fine on desktop without doing anything, but I have to edit something to make it work on mobile.
product-template.liquid
{% if product.images.size > 1 %}
{% case product.images.size %}
{% when 2 %}
{% assign thumbnail_width = 'small--one-third medium-up--push-one-sixth medium-up--one-third' %}
{% when 4 %}
{% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
{% else %}
{% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
{% endcase %}
{% for image in product.images %}
-
{% endfor %}
This is theme.scss.liquid
/*====== Product template styles ======*/
.product-single__title {
margin-bottom: 0;
}
.product-single__variants {
display: none;
.no-js & {
display: block;
}
}
.product-single__featured-image-wrapper {
margin: 0 auto $gutter;
position: relative;
width: 100%;
}
.product-single__photos,
.product-single__thumbnails {
a,
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
a.product-single__thumbnail {
position: relative;
padding-top: 100%;
}
a.product-single__thumbnail img {
position: absolute;
left: 0;
right: 0;
top:0;
height: 100%;
width: 100%;
object-fit: cover;
}
.product-single__photos {
.supports-js & {
position: relative;
}
}
.product-single__photo {
width: 100%;
.supports-js & {
position: absolute;
top: 0;
}
&.lazyload {
opacity: 0;
}
}
.lightbox {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.image-zoom {
cursor: move;
}
.product-single__thumbnails li {
margin-bottom: $gutter;
}
.product-single__meta {
padding-top: $gutter / 2;
}
If you need another code, I’ll waste them.
Thank you.
