18250907 Posted February 18, 2021 Share Posted February 18, 2021 Site URL: https://www.themeaningwell.com/ On desktop the gallery is 3 columns here, but in mobile view it becomes 2 columns. Is there a code I can place in the CSS to make it three columns in mobile just like in the desktop view? Thanks so much for any help. Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 I see 3 columns on mobile here. Did you solve this? 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
18250907 Posted February 24, 2021 Author Share Posted February 24, 2021 On 2/19/2021 at 12:08 PM, tuanphan said: I see 3 columns on mobile here. Did you solve this? No, it still show as two columns on mobile, please see attached. Thanks,. Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 On 2/24/2021 at 4:13 PM, 18250907 said: No, it still show as two columns on mobile, please see attached. Thanks,. It looks like you solved this? Also do you want to add space between site title - cart icon? 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
18250907 Posted March 9, 2021 Author Share Posted March 9, 2021 On 3/1/2021 at 9:22 PM, tuanphan said: It looks like you solved this? Also do you want to add space between site title - cart icon? I see.. I don't know why it still shows as two columns on iphones. If I can put space between logo and cart that would be great, thank you so much in advance Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 On 3/9/2021 at 12:57 PM, 18250907 said: I see.. I don't know why it still shows as two columns on iphones. If I can put space between logo and cart that would be great, thank you so much in advance Ah, sorry for the delay. Just checked again. This is not possible. But if we use code to change masonry to grid on mobile, we can set 3 items/row. Do you want to change to grid on mobile? We will give the code 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
18250907 Posted March 22, 2021 Author Share Posted March 22, 2021 On 3/20/2021 at 2:18 PM, tuanphan said: Ah, sorry for the delay. Just checked again. This is not possible. But if we use code to change masonry to grid on mobile, we can set 3 items/row. Do you want to change to grid on mobile? We will give the code Yes! Code will be great! Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 On 3/22/2021 at 4:29 PM, 18250907 said: Yes! Code will be great! Try adding to Design > Custom CSS /* 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(3,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; } } 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
courtneynowlin Posted February 15, 2022 Share Posted February 15, 2022 On 3/24/2021 at 7:00 AM, tuanphan said: Try adding to Design > Custom CSS /* 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(3,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; } } Hi @tuanphan I just found this thread while researching how to make my masonry gallery appear as 3 rows on mobile. I implemented this code, and this is the closest I've gotten to achieving the look I am going for. However, there is still a large vertical gap between the horizontal and vertical images. I am also thinking that the images in the left and right columns are being cut off. I have attached a screenshot below. I would appreciate your help if you are willing! Here is the link to the website:https://www.bucketagency.com/our-work/columbia-regional-airport PW: demo And the code I applied @media @mobile { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(3,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; } } Link to comment
tuanphan Posted February 19, 2022 Share Posted February 19, 2022 On 2/16/2022 at 4:08 AM, courtneynowlin said: Hi @tuanphan I just found this thread while researching how to make my masonry gallery appear as 3 rows on mobile. I implemented this code, and this is the closest I've gotten to achieving the look I am going for. However, there is still a large vertical gap between the horizontal and vertical images. I am also thinking that the images in the left and right columns are being cut off. I have attached a screenshot below. I would appreciate your help if you are willing! Here is the link to the website:https://www.bucketagency.com/our-work/columbia-regional-airport PW: demo And the code I applied @media @mobile { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(3,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; } } It looks like you removed it on mobile. Do you still need help? 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
joannfotografie Posted April 23, 2022 Share Posted April 23, 2022 @tuanphan Hi! I've been trying to do the same, with showing figcaption, but the caption is going to the wrong column. Code is on row 183 (as of right now, but shouldn't change too much) https://gold-cheetah-exh9.squarespace.com/home PW: Geheim123 How do I get the caption to stick to the bottom middle picture? Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 19 hours ago, joannfotografie said: @tuanphan Hi! I've been trying to do the same, with showing figcaption, but the caption is going to the wrong column. Code is on row 183 (as of right now, but shouldn't change too much) https://gold-cheetah-exh9.squarespace.com/home PW: Geheim123 How do I get the caption to stick to the bottom middle picture? In your screenshot, I see it already on bottom middle. Can you explain clearly? 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
joannfotografie Posted April 26, 2022 Share Posted April 26, 2022 On 4/24/2022 at 9:53 AM, tuanphan said: In your screenshot, I see it already on bottom middle. Can you explain clearly? @tuanphan yes of course! I've attached a new screenshot. The title / figcaption belongs to the picture in the middle column bottom picture, but it is in the column on the right Link to comment
tuanphan Posted April 29, 2022 Share Posted April 29, 2022 On 4/27/2022 at 1:25 AM, joannfotografie said: @tuanphan yes of course! I've attached a new screenshot. The title / figcaption belongs to the picture in the middle column bottom picture, but it is in the column on the right Try adding this to Design > Custom CSS /* Fix masonry caption mobile */ @media screen and (max-width:767px) { body#collection-619645a0b14d634e6f06c56c figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; width: calc(~"100% - 6px"); left: 50%; transform: translateX(-50%); }} 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
joannfotografie Posted May 10, 2022 Share Posted May 10, 2022 On 4/29/2022 at 11:25 AM, tuanphan said: Try adding this to Design > Custom CSS /* Fix masonry caption mobile */ @media screen and (max-width:767px) { body#collection-619645a0b14d634e6f06c56c figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; width: calc(~"100% - 6px"); left: 50%; transform: translateX(-50%); }} @tuanphan hi again, i tried doing this, but there is still a piece hanging. also the text is going over the images instead of staying below it. maybe what i want is not possible, that is okay haha then i'll change it back to 2 columns 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