questionagain Posted December 20, 2021 Share Posted December 20, 2021 Site URL: https://lobster-dahlia-4tl7.squarespace.com/config/settings/site-visibility When I collapse the screen to mobile it shows up at just one column making my pictures take up the entire screen. I'd like four columns (will take 3 if it doesn't work out). Can anyone help me out? pass: thephizzydrink Link to comment
Beyondspace Posted December 20, 2021 Share Posted December 20, 2021 (edited) 10 hours ago, questionagain said: Site URL: https://lobster-dahlia-4tl7.squarespace.com/config/settings/site-visibility When I collapse the screen to mobile it shows up at just one column making my pictures take up the entire screen. I'd like four columns (will take 3 if it doesn't work out). Can anyone help me out? pass: thephizzydrink Try in Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61bfcd9080ef7218a056d6f0"] { .summary-item-list { display: flex !important; flex-wrap: wrap !important; height: auto !important; justify-content: space-evenly; .summary-item { width: 40% !important; height: auto !important; position: relative !important; top: 0 !important; left: unset !important; display: grid; grid-template-rows: 1fr 100px; grid-gap: 10px; img { height: 100% !important; } } } .summary-thumbnail-container { height: 100% !important; } .summary-thumbnail.img-wrapper { height: 100% !important; } } } I suggest using 2 item per row in order to display content sizably for client Let me know how it works on your site Support me by pressing 👍 if this useful for you Edited December 20, 2021 by bangank36 questionagain and tuanphan 2 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
questionagain Posted December 20, 2021 Author Share Posted December 20, 2021 35 minutes ago, bangank36 said: Try in Home > Design > Custom Css @media only screen and (max-width: 767px) { section[data-section-id="61bfcd9080ef7218a056d6f0"] { .summary-item-list { display: flex !important; flex-wrap: wrap !important; height: auto !important; justify-content: space-evenly; .summary-item { width: 40% !important; height: auto !important; position: relative !important; top: 0 !important; left: unset !important; display: grid; grid-template-rows: 1fr 100px; grid-gap: 10px; img { height: 100% !important; } } } .summary-thumbnail-container { height: 100% !important; } .summary-thumbnail.img-wrapper { height: 100% !important; } } } I suggest using 2 item per row in order to display content sizably for client Let me know how it works on your site Support me by pressing 👍 if this useful for you Thank you so much! It worked on the second summary block only and not the first. Is there anyway I can make both summary blocks have two columns on mobile instead of the bottom one only? Thank you!! Link to comment
questionagain Posted December 20, 2021 Author Share Posted December 20, 2021 Site URL: https://lobster-dahlia-4tl7.squarespace.com/config/settings/site-visibility I reached out and asked this last night and I got an answer! However, the code given only worked for one of the summary sections. It worked on the second summary block only and not the first. Is there anyway I can make both summary blocks have two columns on mobile instead of the bottom one only? And how can I prevent this from happening if I want to add more summary blocks? pass: thephizzydrink Thanks!! Link to comment
tuanphan Posted December 25, 2021 Share Posted December 25, 2021 On 12/21/2021 at 3:56 AM, questionagain said: Site URL: https://lobster-dahlia-4tl7.squarespace.com/config/settings/site-visibility I reached out and asked this last night and I got an answer! However, the code given only worked for one of the summary sections. It worked on the second summary block only and not the first. Is there anyway I can make both summary blocks have two columns on mobile instead of the bottom one only? And how can I prevent this from happening if I want to add more summary blocks? pass: thephizzydrink Thanks!! Try this new code @media only screen and (max-width: 767px) { section[data-section-id="61bfcd9080ef7218a056d6f0"], [data-section-id="61bfcc66f94f741f593cacb0"] { .summary-item-list { display: flex !important; flex-wrap: wrap !important; height: auto !important; justify-content: space-evenly; .summary-item { width: 40% !important; height: auto !important; position: relative !important; top: 0 !important; left: unset !important; display: grid; grid-template-rows: 1fr 100px; grid-gap: 10px; img { height: 100% !important; } } } .summary-thumbnail-container { height: 100% !important; } .summary-thumbnail.img-wrapper { height: 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment