pro Posted November 20, 2021 Share Posted November 20, 2021 Site URL: https://steven.squarespace.com/clients/p/unapologetic-foods Currently, on small screens, Summary Block always shows only 1 item per row. Is there a code that would force it to show at least 2 items per row? Thank you in advance. Link to comment
Beyondspace Posted November 21, 2021 Share Posted November 21, 2021 My testing result BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
pro Posted November 21, 2021 Author Share Posted November 21, 2021 (edited) 3 hours ago, bangank36 said: Hi, You can try adding to Home > Design > Custom Css /*Setting 2 item in 1 row summary block on mobile*/ @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1636734918137_160690 .summary-item { width: 50% !important; display: inline-block; float: right; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too The code works well only with even number of items. But with odd number of items, not perfect. For some reason { float: left; } doesn't fix it. Any way to fix it? Found another bug: Between 675px and 767px wide, the layout is all messed up: Edited November 21, 2021 by alanx Link to comment
pro Posted November 22, 2021 Author Share Posted November 22, 2021 1 hour ago, bangank36 said: Hi, Kindly replace my previous codes with the following ones @media only screen and (max-width: 767px) { .summary-item-list { display: flex; flex-wrap: wrap; } .summary-item { width: 50% !important; } } Unfortunately, between 675px and 767px wide, the layout is still messed up. Anyway to fix it? Thanks. Link to comment
Solution Beyondspace Posted November 22, 2021 Solution Share Posted November 22, 2021 8 hours ago, alanx said: Unfortunately, between 675px and 767px wide, the layout is still messed up. Anyway to fix it? Thanks. Hi @alanx, I suggest another solution with grid. Try the following code on your site @media only screen and (max-width: 767px) { .summary-item-list { display: grid; grid-template-columns: 1fr 1fr; } .summary-item { width: 100% !important; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too pro 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
pro Posted November 22, 2021 Author Share Posted November 22, 2021 3 hours ago, bangank36 said: Hi @alanx, I suggest another solution with grid. Try the following code on your site @media only screen and (max-width: 767px) { .summary-item-list { display: grid; grid-template-columns: 1fr 1fr; } .summary-item { width: 100% !important; } } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too Thank you, this works! Beyondspace 1 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