ThrivePhotography Posted August 25, 2023 Share Posted August 25, 2023 Hello I have been struggling with this for a while. I just can not seem to find some code that will work. Or am I doing it wrong? This is the gallery: https://www.thriveboudoir.com.au/gallery What I want to achieve is the following: Masonry Style 1 column for mobile and 2 columns for desktop Full Bleed Spacing 9 I am pretty sure I am using Squarespace 7.1. Also , I am unsure of the best place to insert the code. I have tried the Custom CSS area and also for just for the gallery page I have tried code from searching forums and tried code generated from Chat GTP with no success. Any help would be hugely appreciated Link to comment
tuanphan Posted August 26, 2023 Share Posted August 26, 2023 You can use Gallery Section Masonry with 2 columns in setting. Then we can give you code to make it 1 column on mobile. 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
ThrivePhotography Posted August 26, 2023 Author Share Posted August 26, 2023 That would be wonderful. Thank you Link to comment
tuanphan Posted August 27, 2023 Share Posted August 27, 2023 When you've done add it, let me know, we will check & give the code 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
ThrivePhotography Posted August 27, 2023 Author Share Posted August 27, 2023 16 hours ago, tuanphan said: When you've done add it, let me know, we will check & give the code Done. Thank you Link to comment
Solution tuanphan Posted August 29, 2023 Solution Share Posted August 29, 2023 Add this to Website > Website Tools > Custom CSS /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 10 !important; padding-right: 10 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }} mike.bj 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
ThrivePhotography Posted September 1, 2023 Author Share Posted September 1, 2023 On 8/29/2023 at 6:28 PM, tuanphan said: Add this to Website > Website Tools > Custom CSS /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 10 !important; padding-right: 10 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }} Thank you so much 🙏🙏 I just did that, and it is working perfectly. I can't tell you how much I appreciate you passing on that information. It has had me stumped for months. You are a legend tuanphan 1 Link to comment
nehashafqat Posted March 12 Share Posted March 12 Hi, I'm having a similar problem but this particular code isnt working. I'm using the following settings and want my image gallery to appear as 2 columns on web and 1 column on mobile Link to comment
tuanphan Posted March 13 Share Posted March 13 On 3/12/2024 at 12:46 PM, nehashafqat said: Hi, I'm having a similar problem but this particular code isnt working. I'm using the following settings and want my image gallery to appear as 2 columns on web and 1 column on mobile Above is for Gallery Masonry, with Gallery Grid, use this code @media screen and (max-width:767px) { .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; } } If it doesn't work, please share link to page where you use gallery, I can check easier Kinreu 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
mike.bj Posted April 6 Share Posted April 6 @tuanphan Thank you for this code. Had the same problem and came across it. Works perfectly, you have some serious talent! tuanphan 1 Link to comment
Kinreu Posted May 1 Share Posted May 1 @tuanphan this is great it worked great with the code you gave to @ThrivePhotography I applied on my website for the homepage. On desktop I still have my 3 columns, I have one on mobile. but on Ipad I got three. is there a way top to have like two columns on ipad ? thanks a lot. It's for this page : https://www.maisonhesper.com Link to comment
tuanphan Posted May 2 Share Posted May 2 6 hours ago, Kinreu said: @tuanphan this is great it worked great with the code you gave to @ThrivePhotography I applied on my website for the homepage. On desktop I still have my 3 columns, I have one on mobile. but on Ipad I got three. is there a way top to have like two columns on ipad ? thanks a lot. It's for this page : https://www.maisonhesper.com With 2 columns on iPad, use this CSS code @media only screen and (max-width: 991px) and (min-width:768px) { body.homepage { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } }} Kinreu 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
Kinreu Posted May 2 Share Posted May 2 Thanks a lot @tuanphan It actually makes the trick on ipad. where I have two columns now, but i'm loosing the one column on mobile. Not sure its possible to have everything at once : 3 columns on desktop, 2 on ipad and 1 on mobile. I don't get why Squarespace do not let styling menu be different from desktop and mobile on galleries. Link to comment
tuanphan Posted May 3 Share Posted May 3 21 hours ago, Kinreu said: Thanks a lot @tuanphan It actually makes the trick on ipad. where I have two columns now, but i'm loosing the one column on mobile. Not sure its possible to have everything at once : 3 columns on desktop, 2 on ipad and 1 on mobile. I don't get why Squarespace do not let styling menu be different from desktop and mobile on galleries. The code should run on Tablet Only, it won't run on Mobile. If it run on mobile, maybe some code conflict together. Can you send all current code in CSS? 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
Kinreu Posted May 3 Share Posted May 3 Ohhh so I had to copy both part of the code like this ? /* No underline Nav */ .header-nav-item--active a { background-image: none!important; } /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 15 !important; padding-right: 15 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }} @media only screen and (max-width: 991px) and (min-width:768px) { body.homepage { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } }} because it's seems to work on all device now. Thanksa gain for your feedback, let me know if I should remove something 🙂 Link to comment
tuanphan Posted May 4 Share Posted May 4 21 hours ago, Kinreu said: Ohhh so I had to copy both part of the code like this ? /* No underline Nav */ .header-nav-item--active a { background-image: none!important; } /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 15 !important; padding-right: 15 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }} @media only screen and (max-width: 991px) and (min-width:768px) { body.homepage { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } }} because it's seems to work on all device now. Thanksa gain for your feedback, let me know if I should remove something 🙂 I see it still 1 image/row on mobile now 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
Kinreu Posted May 4 Share Posted May 4 (edited) @tuanphan This is what I wanted, 3 column on desktop, 2 on ipad and 1 on mobile. is there a problem the code I sent ? should I remove some of it ? thanks again. Edited May 4 by Kinreu correction Link to comment
tuanphan Posted May 5 Share Posted May 5 21 hours ago, Kinreu said: @tuanphan This is what I wanted, 3 column on desktop, 2 on ipad and 1 on mobile. is there a problem the code I sent ? should I remove some of it ? thanks again. I see the code is correct and it already show 3 on desktop, 2 on tablet and 1 on mobile. What is problem here? 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
Kinreu Posted May 5 Share Posted May 5 thanks @tuanphan that i wanted the confirmation for that the code to display in all the situation was correct. Thanks afain for your help. tuanphan 1 Link to comment
GregOvens Posted May 13 Share Posted May 13 Hi @tuanphan I tried your solution to implement for a blog posts, which contains a Grid gallery. But for some reason the code do not work for me. I would like to make gallery within blog posts (in general) to display content on mobile devices within 1 column. URL: https://www.slovakspots.com/bratislava-accommodation-1/hotel-devin Password: Ulicajekrasnydom Thank you for your help! 🙂 Link to comment
tuanphan Posted May 16 Share Posted May 16 On 5/13/2024 at 6:56 PM, GregOvens said: Hi @tuanphan I tried your solution to implement for a blog posts, which contains a Grid gallery. But for some reason the code do not work for me. I would like to make gallery within blog posts (in general) to display content on mobile devices within 1 column. URL: https://www.slovakspots.com/bratislava-accommodation-1/hotel-devin Password: Ulicajekrasnydom Thank you for your help! 🙂 You can use this code @media screen and (max-width:767px) { body[class*="type-blog"] .gallery-block .slide { width: 100% !important; } } GregOvens 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
tiffil Posted July 22 Share Posted July 22 Hi @tuanphan, i have the same request i would like to turn -> Gallery - 2 columns of Images for desktop gallery and 1 column for mobile. This is the gallery: https://www.theophile-dreyfus.com/ All project. Thank you for your help. Link to comment
tuanphan Posted July 25 Share Posted July 25 On 7/22/2024 at 11:21 PM, tiffil said: Hi @tuanphan, i have the same request i would like to turn -> Gallery - 2 columns of Images for desktop gallery and 1 column for mobile. This is the gallery: https://www.theophile-dreyfus.com/ All project. Thank you for your help. I see it already 1 column 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
tiffil Posted July 29 Share Posted July 29 In this section yes, but not in this one : https://www.theophile-dreyfus.com/travels/mexico Link to comment
tuanphan Posted July 30 Share Posted July 30 22 hours ago, tiffil said: In this section yes, but not in this one : https://www.theophile-dreyfus.com/travels/mexico You can use this to Custom CSS @media screen and (max-width:767px) { body#item-665b3d9ac4208a2b2597234f { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 30px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 10 !important; padding-right: 10 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }}} 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