MiridiosII
-
Posts
8 -
Joined
-
Last visited
Reputation Activity
-
MiridiosII got a reaction from junecz in Squarespace 7.1, how to setup the product breadcrumb and category layout on mobile...solved.
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; } }
-
MiridiosII got a reaction from lgwebdesign in Squarespace 7.1, how to setup the product breadcrumb and category layout on mobile...solved.
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; } }
-
MiridiosII got a reaction from tuanphan in Squarespace 7.1, how to setup the product breadcrumb and category layout on mobile...solved.
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; } }
-
MiridiosII got a reaction from tuanphan in Squarespace 7.1, how to make the product list show 2 columns on mobile view instead of 1...solved.
@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.
