Adding Padding on left/right of Gallery Grid

Hello all, 

I have added a simple GALLERY GRID to my site in 7.1 but I no longer see the option to add SPACERS on either side of it (so that the gallery grid does NOT take up the whole width of the page). Does anyone know how I can add padding to either side of my gallery grid?

THANKS!

Hi. Can you share link to page where you use Gallery Grid? We can help easier

On 5/24/2021 at 5:34 AM, tuanphan said:

Hi. Can you share link to page where you use Gallery Grid? We can help easier

Sure! @tuanphan

You should be able to see here  https://disc-strawberry-4nlb.squarespace.com/headshots

If it asks you for password it is "gallery"

Thanks in advance!

Perfect - THANK YOU!

On 5/26/2021 at 2:47 AM, tuanphan said:

Add to Design > Custom CSS

/* headshots gallery padding */
body#collection-60a66b9fd9e07e2ed6b44016 .gallery-grid.gallery-grid--layout-grid {
    padding-left: 10vw;
    padding-right: 10vw;
}

 

Do you have a way of doing this for all gallery sections across all pages? Thank you in advance!

On 2/5/2022 at 4:54 AM, Jlcurtin said:

Do you have a way of doing this for all gallery sections across all pages? Thank you in advance!

Use this new code

.gallery-grid.gallery-grid--layout-grid {
    padding-left: 10vw;
    padding-right: 10vw;
}

Any way to do this exact thing, but with Masonry style gallery grids?

9 hours ago, creaturellc said:

Any way to do this exact thing, but with Masonry style gallery grids?

Can you share link to page where you use masonry? We can help easier

How do I add a full bleed gallery but so it only takes up one half of the screen (shown by the red square)? So essentially a spacer on only one side of the gallery so that it is off-centered. Many thanks in advance.

7 hours ago, tuanphan said:

Can you share link to page where you use masonry? We can help easier

Thanks, tuanphan-

https://www.creaturellc.com/work

On 3/24/2022 at 8:58 PM, creaturellc said:

Thanks, tuanphan-

https://www.creaturellc.com/work

Add to Design > Custom CSS > Then save & reload the site

/* Gallery section - Masonry padding */
.gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}

On 3/24/2022 at 5:29 PM, fpSVA said:

How do I add a full bleed gallery but so it only takes up one half of the screen (shown by the red square)? So essentially a spacer on only one side of the gallery so that it is off-centered. Many thanks in advance.

Try adding a Gallery Slideshow, then share url, we will try code to make same layout

You can also consider List Section layout

On 3/25/2022 at 11:06 PM, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

/* Gallery section - Masonry padding */
.gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}

 

Perfect! Thank you so much!

Chiming in, hoping the resourceful @tuanphan may have a solution how to add side padding on the (full width) Gallery page grid in Tremont (Carson) template - see example here

General page padding and/or site width adjustments in Design settings apparently do not affect the Gallery page grid (in Horizontal setting)

11 hours ago, BureauSF said:

Chiming in, hoping the resourceful @tuanphan may have a solution how to add side padding on the (full width) Gallery page grid in Tremont (Carson) template - see example here

General page padding and/or site width adjustments in Design settings apparently do not affect the Gallery page grid (in Horizontal setting)

You mean add left/right padding to gallery on this page? 

https://denisa-bj.squarespace.com/test-gallery

@tuanphan correct, hoping to add left/right padding to the Gallery page.

For some reason the Left/Right Content Padding + Content Max Widthadjustments in Site Settings do not apply to Gallery pages.

15 hours ago, BureauSF said:

@tuanphan correct, hoping to add left/right padding to the Gallery page.

For some reason the Left/Right Content Padding + Content Max Widthadjustments in Site Settings do not apply to Gallery pages.

Try adding to Design > Custom CSS

.slides {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}

Also, I see a huge space on right of screen

Thank you, @tuanphan, this worked like a charm!

PS: I do not see a huge space on right of screen on my end

On 2/7/2022 at 6:42 PM, tuanphan said:

Use this new code

.gallery-grid.gallery-grid--layout-grid {
    padding-left: 10vw;
    padding-right: 10vw;
}

 

Is there a way to do this that only applies it to desktop and not mobile?

2 hours ago, PrincipleD said:

Is there a way to do this that only applies it to desktop and not mobile?

You can use this

@media screen and (min-width:768px) {
.gallery-grid.gallery-grid--layout-grid {
    padding-left: 10vw;
    padding-right: 10vw;
}
}

Sorry I need it the other way round, i need it to be full width on mobile not desktop which the above code seem to be doing. 

The code I sent will apply to Desktop Only. You want that code run on Mobile only or?

I need the mobile images to be full width and the desktop images to have a greater margin on the left so far i have achieved what I want on the desktop but not mobile

if it makes it clearer please have a look at the single project page:

https://finch-cricket-9rxf.squarespace.com/

Pw: Berlina1

Is there an answer to this