matthewhodges Posted January 13 Share Posted January 13 I am using the following bit of code on pages of my site which contain a gallery, so that in mobile view the gallery goes to a single column (rather than two coloumns, which seems to be the default): <style> @media screen and (max-width:800px) {.gallery-grid-wrapper {grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 1vw !important;}} </style> The code works well on every page except the homepage. I think this is because on the homepage I am using the 'masonry' gallery, as opposed to the 'simple grid' that I am using on all the other pages. I have tried adjusting the code above but I can't get it to work. Any ideas? Link to comment
Ziggy Posted January 13 Share Posted January 13 Can you share the website URL and the page and section you want this to apply to? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
matthewhodges Posted January 13 Author Share Posted January 13 Hi https://www.matthodgesdesign.com/ It's the homepage – the gallery is the whole page, basically. Thanks Link to comment
Solution tuanphan Posted January 15 Solution Share Posted January 15 On 1/14/2023 at 12:07 AM, matthewhodges said: Hi https://www.matthodgesdesign.com/ It's the homepage – the gallery is the whole page, basically. Thanks Use this code for masonry /* Masonry to grid mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } } matthewhodges 1 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
matthewhodges Posted January 17 Author Share Posted January 17 That worked nicely – thanks very much! Link to comment
matthewhodges Posted January 17 Author Share Posted January 17 On 1/15/2023 at 9:44 AM, tuanphan said: Use this code for masonry /* Masonry to grid mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr) !important; grid-column-gap: 10px; grid-row-gap: 10px; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: 100% !important; } } One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that? Link to comment
tuanphan Posted January 19 Share Posted January 19 On 1/17/2023 at 9:33 PM, matthewhodges said: One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that? It looks already centered now? matthewhodges 1 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
matthewhodges Posted January 19 Author Share Posted January 19 All good – I emailed you and you sent me the right code. Many thanks! 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