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
Mathias654321 Posted February 28 Author Share Posted February 28 Hi @tuanphan, Changing the the px to 1 in the code didn't resolve this issue for me. Still when I downsize my window, my product listings either scramble or go to the 1 per row display. Ideally I'd like to keep the structure as initially inted in the 2 then 3 row configuration. Any chance you know what the issue might be? Thanks a lot for your help, Mathias Link to comment
tuanphan Posted March 5 Share Posted March 5 On 2/28/2023 at 8:48 PM, Mathias654321 said: Hi @tuanphan, Changing the the px to 1 in the code didn't resolve this issue for me. Still when I downsize my window, my product listings either scramble or go to the 1 per row display. Ideally I'd like to keep the structure as initially inted in the 2 then 3 row configuration. Any chance you know what the issue might be? Thanks a lot for your help, Mathias Which screen size do you see problem? 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 29 Author Share Posted April 29 On 3/5/2023 at 3:29 PM, tuanphan said: Which screen size do you see problem? Hi @tuanphan, Can you elaborate what you mean by this? When my browser window is at max size, the products display as intended in the 'carousel like configuration' (2 then 3 pictures per row). However when I downsize the window, the products jump to display 1 item per row. Ideally I'd like my structure to stay in the 'carousel' like structure, even if I downsize the window. I checked on a friends laptop, and on there my product page shows 1 item per row. So it doesn't even start with the carousel like display. I assume this is because of when the window is below a certain pixel range, the code demands the product display to jump to 1 item per row. Any idea how I can code so that I can keep the same structure no matter how small my browser window gets? Appreciate your time and help! Mathias 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