MiridiosII
Member-
Content Count
8 -
Joined
-
Last visited
-
tuanphan reacted to a question: Squarespace 7.1, How to change the background of your cookie banner popup...solved.
-
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; }
-
- squarespace-7.1
- mobile
-
(and 1 more)
Tagged with:
-
Slight change in the code for color of the "sale" tag. .white .products.collection-content-wrapper .product-mark.sale { color: #000 !important; }
- 1 reply
-
- product-page
- quantity
-
(and 1 more)
Tagged with:
-
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-conte
- 1 reply
-
- product-page
- quantity
-
(and 1 more)
Tagged with:
-
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 chang
-
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; } }
- 4 replies
-
- mobile
- product-page
-
(and 1 more)
Tagged with:
-
@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) { .product
- 4 replies
-
- mobile
- product-page
-
(and 1 more)
Tagged with: