Justifying images in gallery

Hi gang

I hope you're all good.

On this web page, for example,  https://johnbrewerphotography.com/dallas I would like to justify the two bottom images to the left or centre of the page. I've got a couple of other pages I want to justify too. How can I do that please? Template is Brine.

Thanks

John

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:901px) {
body#collection-65bbd0e1a9112d3cac570ae4 {
.sqs-gallery-design-autocolumns {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 10px;
}
.collection-type-gallery.gallery-design-grid .slide {
    width: 100% !important;
    height: auto !important;
    top: unset !important;
    left: unset !important;
    position: relative !important;
}
.sqs-gallery-design-autocolumns-slide img {
    height: 100% !important;
}}}

Hi tuanphan

Thanks for your reply. Unfortunately that didn't work but resulted in moving the footer text up and behind the top row of images.

I do already have some custom code (that you gave me last year - thanks!) and I wonder if that is interfering. Or should I put the new code you've given before the older code? The code I currently have is

@media screen and (max-width:640px) {
a.Mobile-bar-branding {
    font-size: 18px !important;
}
.Mobile-bar.Mobile-bar--top {
    justify-content: space-between !important;
}
[data-nc-container="top-center"] {
    float: right !important;
    position: absolute;
    right: 2vw;
}
}

Thanks

John

You try adding it again, I just tested the code from my browser and it looks fine

Ok, thank you 🙂