MiridiosII

I used a carousel summary to show related products by tag, not category. On mobile view, the images would be 75% smaller than the image block. I inserted this code to solve that problem. You must use the same aspect ratio in your carousel summary as you do your thumbnail images for the products or blog posts, or it will skew the image. I use 3:2 in my product thumbnails and carousel summary. Insert this code in your "custom CSS" in the design tab. .sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide img { width: 100% !important; height: 100% !important; }

Slight change in the code for color of the "sale" tag. .white .products.collection-content-wrapper .product-mark.sale { color: #000 !important; }

I wanted my product availability to show similarly to the "sale" tag. I have my product scarcity show when it is 5 or less in inventory. I changed the no background to a pink background. This required me to changed my Sale letter color from Pink to black. I adjusted the margin and padding to make the color banner look even. The code below shows those changes. .white .products.collection-content-wrapper .product-mark.sale { color: #000; } .products.collection-content-wrapper .product-scarcity { margin-top: 0rem; } .tweak-products-text-alignment-middle .products.collection-content-wrapper .grid-meta-wrapper .grid-meta-status { background: #e64c9e; } .products.collection-content-wrapper .product-scarcity { padding-bottom: 5px; padding-top: 5px; } .products.collection-content-wrapper .product-scarcity { text-align: center; }

This is what I did to change the appearance of the slideshow thumbnail views below the product image when on desktop. .tweak-product-basic-item-gallery-aspect-ratio-169-widescreen .ProductItem-gallery-thumbnails-item { height: 45px; width: 80px; } .tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails-item { margin-right: 0px; } .tweak-product-basic-item-gallery-design-slideshow.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery-thumbnails { overflow-x: hidden; text-align: center; } I am trying to post all of my changes/solutions to this forum for the new 7.1, but my code is all mixed up, so I apologize if I missed something. If anyone has any issues, please comment below.

I forgot this. @media only screen and (max-width: 767px) { .tweak-product-basic-item-navigation-breadcrumbs .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb, .tweak-product-basic-item-navigation-both .ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb { display: block; z-index: 1; } }

@media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-row-gap: 4vw; padding: 0; } } On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.

On squarespace version 7.1, when in mobile view, if you have a long list of categories, it creates a scrolling list that travels sideways and the breadcrumbs are gone on mobile. Insert this code into your Custom CSS to make the categories center align and wrap, with no scrolling. It also makes the breadcrumbs visible on mobile. @media only screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-children { padding-top: 30px; flex-wrap: wrap; overflow-x: hidden; justify-content: center; } } @media only screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-breadcrumb { text-align: center; } } @media only screen and (max-width: 575px) { .products.collection-content-wrapper .nested-category-title { text-align: center; } }

I inserted this code into the "Custom CSS" section of the "Design" section. This code is dependent on you using the "Light" theme. If you use the "Dark" theme, change the code accordingly. .sqs-cookie-banner-v2.LIGHT { background-color: #ffd6f1; }