ladyforge Posted July 20, 2022 Share Posted July 20, 2022 (edited) Edit Edited March 10 by ladyforge Link to comment
creedon Posted July 20, 2022 Share Posted July 20, 2022 You have syntax errors in your code. Most rule-sets only have a single open/close curly bracket. @media queries are a bit different in that you enclose rule-sets within it. Here is some cleaned-up code but I haven't tested it. @media screen and ( max-width : 767px ) { .products .list-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; display: grid; grid-column-gap: 10px; grid-row-gap: 20px; } } .products .grid-item { width: 48%; } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out { order: 2; } .products.collection-content-wrapper .products-flex-container .list-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media only screen and (max-width: 768px) { .products.collection-content-wrapper .products-flex-container .list-grid { grid-template-columns: 1fr; } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 100%; } } .products.collection-content-wrapper .products-flex-container .list-grid .grid-item { width: 80%; } Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment