Edwardxu Posted March 25, 2021 Share Posted March 25, 2021 Site URL: https://www.edxulondon.com/shop-1 I am trying to figure out how to show 2 items per row for my online store on mobile device. I tried the codes from other posts but they didn't work and they broke my mega menu plugin (CSS code). Is someone able to help? https://www.edxulondon.com/shop-1 Many thanks in advance! Link to comment
WillMyers Posted March 25, 2021 Share Posted March 25, 2021 Hey Edwardxu, this is a great use for flexbox. Try this: @media(max-width:767px) { .products .list-grid{ display:flex; flex-wrap:wrap; } .grid-item{ flex: 0 1 50%; } } Let me know if that does it for you! Hey there, my name is Will and I help Squarespace designers and developers with my plugins, tutorials, and my Code Curious Membership. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - I'm an expert in 2 of these. Youtube | Website Link to comment
Edwardxu Posted March 25, 2021 Author Share Posted March 25, 2021 23 minutes ago, WillMyers said: Hey Edwardxu, this is a great use for flexbox. Try this: @media(max-width:767px) { .products .list-grid{ display:flex; flex-wrap:wrap; } .grid-item{ flex: 0 1 50%; } } Let me know if that does it for you! Hi Will, It worked perfectly! Thank you so much! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.