Frames_by_Saurabh Posted June 18, 2020 Share Posted June 18, 2020 Site URL: https://www.framesbysaurabh.com/ Hi! It seems Squarespace has changed the mobile view for 7.1 Grid Masonry to show 2 images per row instead of 1 image per row on mobile view. Is there a way to show only 1 image per row using CSS? Website: www.framesbysaurabh.com Thanks in advance!! andruuuuu 1 Link to comment
RyanDejaegher Posted June 18, 2020 Share Posted June 18, 2020 @Frames_by_Saurabh This code will give you a single column on tablet and down. Result: @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; } .gallery-masonry-item-wrapper { height: unset !important; } } Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Frames_by_Saurabh Posted June 18, 2020 Author Share Posted June 18, 2020 Thanks for the prompt reply, Ryan. It didn't seem to work unfortunately. There was a margin issue which I could fix by adding margin-bottom: 20px !important; to the code. But the bigger issue is my bottom section of the page, which has the "Go to Top" and the Footer, get moved up (screenshot added). I believe this has something to do with the height value somewhere. Link to comment
Frames_by_Saurabh Posted June 19, 2020 Author Share Posted June 19, 2020 Can anyone assist here? Thanks! Link to comment
RyanDejaegher Posted June 19, 2020 Share Posted June 19, 2020 @Frames_by_Saurabh /* Add this code to Design -> Custom CSS */ .gallery-masonry-wrapper { height: unset !important; } This should fix it Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Frames_by_Saurabh Posted June 22, 2020 Author Share Posted June 22, 2020 Thanks, Ryan! That worked although it added a weird jankyness to the scrolling. Images jump up/down sometimes. Happens on both Iphones and Android phones. Any ideas? Link to comment
RyanDejaegher Posted June 22, 2020 Share Posted June 22, 2020 @Frames_by_Saurabh It looks like Squarespace does some lazy loading on the images that aren't visible yet, so as you scroll and as these images are loaded the layout of the page is "repainted". Repainting can cause a bit of performance lag especially when a lot of elements are being repainted. You could experiment with removing the code altogether and see if you run into the same issue. Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Frames_by_Saurabh Posted June 22, 2020 Author Share Posted June 22, 2020 Thanks for all your help, Ryan. I really appreciate it. I removed the code and it works fine but looks terrible on mobile screens due to 2 pics/row. So i guess i have to choose between the mobile view looking correctly or the page working smoothly! If any Squarespace admin/engineers are looking at the forums, please do realize we pay for your site which promises better/easier features without any compromises! This is all very frustrating. Link to comment
andruuuuu Posted October 10, 2020 Share Posted October 10, 2020 On 6/18/2020 at 1:13 PM, Frames_by_Saurabh said: Site URL: https://www.framesbysaurabh.com/ Hi! It seems Squarespace has changed the mobile view for 7.1 Grid Masonry to show 2 images per row instead of 1 image per row on mobile view. Is there a way to show only 1 image per row using CSS? Website: www.framesbysaurabh.com Thanks in advance!! How do you like 7.1? I am using 7.0 and may actually want to update so i can try out the new masonry on mobile. do you care the images get resized so much? Link to comment
NorthernAurora Posted December 12, 2020 Share Posted December 12, 2020 I tried the custom code provided here and it indeed created just one row. I added the additional code that @RyanDejaegher provided. For me, it didn't create the space in between the posts, and more importantly, whenever there was a picture in landscape mode, it was just filling up half of the page instead of using the full width. Any tips? Link to comment
tuanphan Posted December 13, 2020 Share Posted December 13, 2020 19 hours ago, NorthernAurora said: I tried the custom code provided here and it indeed created just one row. I added the additional code that @RyanDejaegher provided. For me, it didn't create the space in between the posts, and more importantly, whenever there was a picture in landscape mode, it was just filling up half of the page instead of using the full width. Any tips? Can you share site url? We can help easier 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
PiaMD Posted January 25, 2021 Share Posted January 25, 2021 Hi, I also tried the custom code provided here but it moves my footer appear in the middle of the scroll. Also is there a way to add a padding between the photos, now they are glued together, I want some space in between. Thanks in advance if anyone can help? Link to comment
tuanphan Posted February 1, 2021 Share Posted February 1, 2021 On 1/25/2021 at 2:34 AM, PiaMD said: Hi, I also tried the custom code provided here but it moves my footer appear in the middle of the scroll. Also is there a way to add a padding between the photos, now they are glued together, I want some space in between. Thanks in advance if anyone can help? Can you share site url? We can help easier 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
megcand Posted February 2, 2021 Share Posted February 2, 2021 looks like this is the code that will work @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; margin-bottom: 20px !important; } .gallery-masonry-item-wrapper { height: unset !important; } .gallery-masonry-wrapper { height: unset !important; } } tuanphan 1 Link to comment
ElkeTeurlinckx Posted November 24 Share Posted November 24 (edited) Hi there, I would like to have one picture per row on mobile view and 2 on desktop mode on my website www.elketeurlinckx.squarespace.com, it appears to show on mobile view in the edit modus that there is just 1 picture per row (which i want) but on my mobile (iphone 14) it doesn't show up and it's just half of the space. Can anyone help me? I used this code: @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; margin-bottom: 20px !important; } .gallery-masonry-item-wrapper { height: unset !important; } .gallery-masonry-wrapper { height: unset !important; } } Edited November 24 by ElkeTeurlinckx Link to comment
tuanphan Posted November 26 Share Posted November 26 On 11/24/2023 at 3:40 PM, ElkeTeurlinckx said: Hi there, I would like to have one picture per row on mobile view and 2 on desktop mode on my website www.elketeurlinckx.squarespace.com, it appears to show on mobile view in the edit modus that there is just 1 picture per row (which i want) but on my mobile (iphone 14) it doesn't show up and it's just half of the space. Can anyone help me? I used this code: @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; margin-bottom: 20px !important; } .gallery-masonry-item-wrapper { height: unset !important; } .gallery-masonry-wrapper { height: unset !important; } } You need to set image with to 100% @media(max-width:767px) { .gallery-masonry-item { width: 100% !important; transform: unset !important; position: unset !important; margin-bottom: 20px !important; } .gallery-masonry-item-wrapper { height: unset !important; } .gallery-masonry-wrapper { height: unset !important; } .gallery-masonry .gallery-masonry-item img { width: 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