Padding Above + Between Gallery Blocks

Hi There,

I am using gallery blocks on my v7.1 site (set to full bleed). I want to have some 1 column images followed by 2 column images staggered down my page. Between each gallery block section though, there is no padding between the images from one gallery block to the next. I added in the below code, which does add padding between the gallery blocks, but two things happen:

1. The padding (when viewed on a desktop) looks fine, but when it's viewed on a mobile device, it does not remain even with the padding around the other gallery block images and a larger gap appears. The spacing of the images inside of the gallery blocks throughout is set to 45.
2. This code adds padding to the tops of all of the gallery block sections on the page. The page starts with a text block followed by the first gallery block right below it. I have the copy at the top of the page center aligned in the text block and want to keep even white spacing above and below it.

Questions: What custom code can I use to create even padding between gallery blocks (to be applied site wide) that would keep the padding even when my site is scaled down on a mobile device too? What custom code could be used then to keep the space at the top of just the first gallery block on the page (to be applied site wide) at 0 padding? Any advice or help would be really appreciated.
 

Current Code:

.gallery-grid.gallery-grid--layout-grid {
    padding-top: 30px !important;
}

Desktop: Padding Between Gallery Blocks

Mobile: Padding Between Gallery Blocks

Need a link to your page to help.

You will need to set up a viewing password.

.gallery-grid--layout-grid {
    padding-bottom: 2.25vw !important;
}

That will leave a bit of padding at the bottom, if it bothers you, can reduce the padding or margin of the next section to compensate.

Hi rwp,

Thanks for the quick response. Really appreciate it. I added the code to my site, but it looks like it increased the spacing between the gallery blocks even more ... both on desktop and mobile? Below are updated screenshots. Do you know if there is a way to add code that would allow there to be equal spacing / padding between gallery blocks (images inside of the gallery blocks are set to full bleed) that would scale equally up or down ... both on desktop and mobile? Thank you again.

Desktop:

Mobile:

Did you remove your original code?

Hi rwp,

I left my original code. I just added some additional code, which seemed to get it a bit closer to what I am trying to achieve ... but when I scale up my site now on a larger desktop screen, the padding between the gallery blocks doesn't remain even and gets smaller. Here's the full set of code I have in there right now:

.gallery-grid.gallery-grid--layout-grid {
    padding-top: 30px !important;
}
.gallery-grid--layout-grid {
    padding-bottom: 0vw !important;
}
@media screen and (max-width:767px) {
.gallery-grid.gallery-grid--layout-grid {
    padding-top: 10px !important;
}
}

Take all of that out, and put my code in.

Hi rwp,

Ahhhh! That worked. Thank you!

No problem.