ladyforge Posted July 20, 2022 Share Posted July 20, 2022 Site URL: https://www.ladyforge.com/ How do I add multiple codes to the CSS area? I want to make my mobile site have two colums so I use this code and it works great: @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; } } But then I also want all my sold out products to be moved down and the available products to be at the top of the shop. So I use this code. Both codes work great alone but not together. } } .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%; } } Any help would be really appreciated. thank you Brittany 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 best , and see my profile. Thanks for your support! 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