Alan123 Posted April 17, 2021 Share Posted April 17, 2021 Site URL: https://coconut-lobster-36me.squarespace.com/ Hi! I was wondering if someone could help me with a site I'm pulling together URL: https://coconut-lobster-36me.squarespace.com/ Password: izette I have some Project Pages with galleries on (with 2 or 3 columns on desktop). It would be great if these could be just one column on mobile. Currently the homepage exhibits this behaviour as desired but I wondered if it could be replicated with custom CSS for the Project Pages. Pretty much the opposite of this! Here's the homepage on desktop: Here's the homepage on mobile looking good with the one column: Here's a Project Page on desktop - fine with 3 columns: Here's a Project Page on mobile... Ideally this would be just the one column. Thanks very much in advance! Link to comment
creedon Posted April 18, 2021 Share Posted April 18, 2021 Add the following to Design > Custom CSS. @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .gallery-grid-wrapper { grid-template-columns : 1fr !important; } } This is for v7.1. Let us know how it goes. ec25 and tuanphan 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Alan123 Posted April 23, 2021 Author Share Posted April 23, 2021 Thanks so much!! It works perfectly. 👏 Now these images are optimised for mobile 'feed' view - pretty much full screen, I don't think the lightbox adds any value really. So I've just made a new post: do you know if there's custom CSS to disable the lightbox for mobile only? If it's tricky, I may just disable the lightbox completely, sacrificing it on desktop too. Cheers creedon 1 Link to comment
Jordan22 Posted March 7, 2023 Share Posted March 7, 2023 I was running into the same issue and this code worked perfectly. As a follow up I was wondering if anyone knows how I could add a little more vertical space between the gallery images while in mobile view? It currently looks like this. Link to comment
tuanphan Posted March 8, 2023 Share Posted March 8, 2023 On 3/7/2023 at 12:19 PM, Jordan22 said: I was running into the same issue and this code worked perfectly. As a follow up I was wondering if anyone knows how I could add a little more vertical space between the gallery images while in mobile view? It currently looks like this. Try change code to this @media only screen and ( pointer : coarse ) and ( max-width : 1024px ), screen and ( max-width : 799px ) { .gallery-grid-wrapper { grid-template-columns : 1fr !important; } figure { margin-bottom: 20px !important; } } ec25 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
sekan Posted March 27, 2023 Share Posted March 27, 2023 I'm trying this on 7.1 but for me it doesn't work. You can check jiwajiwa.com/sekan/photography/indonesia Link to comment
tuanphan Posted March 29, 2023 Share Posted March 29, 2023 On 3/27/2023 at 12:47 PM, sekan said: I'm trying this on 7.1 but for me it doesn't work. You can check jiwajiwa.com/sekan/photography/indonesia It looks fine to me Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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