Mathias654321 Posted April 7, 2022 Share Posted April 7, 2022 Site URL: https://www.intro-verso.com/all-new-products Hello, On my webshop I use a coded 'carousel' style layout for my products. There is each time a row of 2, then 3 products and so on. However when the webpage window gets made smaller, my product page loses all of its structure and the products scarmble in a random and not attractive order (see screenshot). Is there a way for me to code so that once the window is made smaller, the products move to a linear view of 1 product per line? This instead of them randomly scrambling. Any help achieving this is much appreciated! Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 Add to Design > Custom CSS @media screen and (max-width:1250px) { div.ProductList-grid div.ProductList-item { width: 100% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Mathias654321 Posted April 11, 2022 Author Share Posted April 11, 2022 20 hours ago, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:1250px) { div.ProductList-grid div.ProductList-item { width: 100% !important; } } Thanks a lot @tuanphan! Is there also a code to keep my original structure no matter how much I downsize the window? Instead of changing the product view to 1 per row in a smaller window. I think I might prefer that, so ideally I'd like to compare both options. Thanks again! Mathias Link to comment
tuanphan Posted April 15, 2022 Share Posted April 15, 2022 On 4/11/2022 at 4:49 PM, Mathias654321 said: Thanks a lot @tuanphan! Is there also a code to keep my original structure no matter how much I downsize the window? Instead of changing the product view to 1 per row in a smaller window. I think I might prefer that, so ideally I'd like to compare both options. Thanks again! Mathias Find this code & edit 992px to 1px @media screen and (min-width: 992px) { .ProductList-grid { display:flex; flex-wrap: wrap } .ProductList-grid>div:nth-child(5n+1),.ProductList-grid>div:nth-child(5n+2) { width: 48.6666% !important; margin: 8px !important } .ProductList-grid>div:nth-child(5n+3),.ProductList-grid>div:nth-child(5n+4),.ProductList-grid>div:nth-child(5n+5) { width: 32% !important; margin: 8px !important; margin-top: 10px !important; margin-bottom: 10px !important } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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