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

Centering the gallery block images


HowCarolSees

Question

2 answers to this question

Recommended Posts

  • 1

The Gallery section in 7.1 layouts is using a CSS Grid when you pick "Grid: Simple" as the layout option. This lays out as you have shown above, as grid layouts are there to align rows AND columns. What you're describing is closer to a CSS flexbox layout, so we'd need to completely remove the grid rules and layout again. you can do this by adding some css. This code is targeted just at the block using a data section id, so you can put this in your custom css (or wrap it in <style></style> block and put it in a code block on your page)

section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper {
    display:flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction:row;
    grid-template-rows:unset !important;
    grid-template-columns:unset !important;
    grid-column-gap:unset !important;
    grid-row-gap:unset !important;
}

section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure {
    flex-basis:12%;
    padding:0 1.5vw 3vw 1.5vw;
}

@media screen and (max-width:768px) {
    section[data-section-id="61196bdba2394134afc7692f"] .gallery-grid-wrapper figure {
        flex-basis:45%
    }
}
  • finds the gallery and unsets its grid properties
  • adds in properties to tell it to lay out as a flexbox and then center its content
  • tells items within the gallery to be 12% wide. this is to put six on a row
  • if the screen is phone or ipad-width then drop that down to two on a row
  • the "gap" properties aren't that well supported for flexboxes in all browsers, so I've used a padding instead to space them out roughly the same as your original grid layout. it's close enough i think

image.thumb.png.25fdce01db4acddb40c6398334bc38a1.png

Edited by iamdavehart
adding picture to show outcome

Dave Hart. Software/Technology Consultant living in London

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