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

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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

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
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

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
On 10/18/2022 at 12:18 AM, martelil said:

The url doesn't work now. Can you check it again?

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
On 10/31/2022 at 9:13 PM, martelil said:

Oh I'm sorry, changed the URL to this: https://www.ucrf.oglilleby.no/home-gallery-copy

Skjermbilde 2022-10-28 kl. 17.26.04.png

Thank you. But I Just checked, no way to control this with 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

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.