Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Padding Above + Between Gallery Blocks


jaugustyn

Question

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

Website_GalleryBlock_Padding_DesktopView.png

 

Mobile: Padding Between Gallery Blocks

Website_GalleryBlock_Padding_MobileView.png

Edited by jaugustyn
Link to comment

9 answers to this question

Recommended Posts

  • 0

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:

Screen Shot 2020-09-27 at 5.05.24 PM.png

 

Mobile:

Screen Shot 2020-09-27 at 5.05.39 PM.png

Edited by jaugustyn
Link to comment
  • 0

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

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