Jump to content

Gallery section: add space between columns + mobile adjustments

Recommended Posts

Hi everyone, I have a gallery section; a masonry grid with two columns, and would like to override the gutter between the columns. In the edit section box it can be set to a maximum of 150 but I want even more space.

I managed to increase the inset of the section using the code below – thanks @tuanphan But I need help to remove the extra inset on mobile. Also, is it possible to have just one column on mobile?

 

Thanks for any help!
Marte

/* Gallery section - Masonry padding */
.gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}
Edited by martelil
Link to comment
  • martelil changed the title to Gallery section: add space between columns + mobile adjustments

Can you share the URL of the page you are trying to do this on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This will mean the padding only applies to desktop:

/* Gallery section - Masonry padding */
@media only screen and (min-width:750px) {
  .gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
 }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 10/18/2022 at 4:39 AM, martelil said:

 that worked!

Now I just need to have only one column on mobile. Plus add the spacing between columns on desktop.

Do you have a clue?

To change to one column on mobile, add this 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(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;
}
}

 

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
On 10/24/2022 at 4:11 PM, martelil said:

Thank you, that worked perfect @tuanphan!

Can you help med with overriding the max default 150 gutter between the two columns in the masonry grid as well?

On mobile or desktop?

With desktop, have you tried adjusting this yet?

image.png.d22d4b9d072f4829cf5819d60b3e087d.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.