Centre align gallery

Site URL: https://www.decoratedwolves.com/

Hi,

I'm looking to centre-align my gallery in rows of 3 when on desktop view in particular.
Can someone please help?

Also, is it possible to alter the size of the gallery images?

https://www.decoratedwolves.com/

Cheers

Steve

37 minutes ago, decoratedwolves said:

Site URL: https://www.decoratedwolves.com/

Hi,

I'm looking to centre-align my gallery in rows of 3 when on desktop view in particular.
Can someone please help?

Also, is it possible to alter the size of the gallery images?

https://www.decoratedwolves.com/

Cheers

Steve

Did you centering the left over like so?

@media only screen and (min-width: 1296px) {
    .sqs-gallery-design-autocolumns-slide {
      position: static;
    }
    .sqs-gallery-design-autocolumns {
      display: grid;
      grid-gap: 0 0;
      grid-template-columns: repeat(3, 1fr);
    }

    .sqs-gallery-design-autocolumns-slide:last-child:nth-child(3n - 2) {
      grid-column-end: 3;
    }
}

On 3/22/2021 at 11:28 AM, bangank36 said:

Did you centering the left over like so?

@media only screen and (min-width: 1296px) {
    .sqs-gallery-design-autocolumns-slide {
      position: static;
    }
    .sqs-gallery-design-autocolumns {
      display: grid;
      grid-gap: 0 0;
      grid-template-columns: repeat(3, 1fr);
    }

    .sqs-gallery-design-autocolumns-slide:last-child:nth-child(3n - 2) {
      grid-column-end: 3;
    }
}

 

Hey,

Yes, this looks like what I would like.
However, that code didnt work on my end...

 

On 3/23/2021 at 10:49 PM, decoratedwolves said:

Hey,

Yes, this looks like what I would like.
However, that code didnt work on my end...

 

Have you solved it yet?

7 hours ago, tuanphan said:

Have you solved it yet?

Hey,
No, not managed to.

On 3/25/2021 at 9:35 PM, decoratedwolves said:

Hey,
No, not managed to.

Just tested. I think the above code should work. Where did you add the code? If custom code doesn't work, try adding this to Settings > Advanced > Code Injection > Header

<style>
  @media only screen and (min-width: 1296px) {
    .sqs-gallery-design-autocolumns-slide {
      position: static;
    }
    .sqs-gallery-design-autocolumns {
      display: grid;
      grid-gap: 0 0;
      grid-template-columns: repeat(3, 1fr);
    }

    .sqs-gallery-design-autocolumns-slide:last-child:nth-child(3n - 2) {
      grid-column-end: 3;
    }
}
</style>

Hey,

Unfortunately, 'Code Injection' is only available on Business/Commerce accounts and that code doesnt seem to work when added to 'custom CSS'.

Any other options?

Thanks

S

20 hours ago, decoratedwolves said:

Hey,

Unfortunately, 'Code Injection' is only available on Business/Commerce accounts and that code doesnt seem to work when added to 'custom CSS'.

Any other options?

Thanks

S

Add to Design > Custom CSS

  @media only screen and (min-width: 1296px) {
    .sqs-gallery-design-autocolumns-slide {
      position: static;
    }
    .sqs-gallery-design-autocolumns {
      display: grid;
      grid-gap: 0 0;
      grid-template-columns: repeat(3, 1fr);
    }

    .sqs-gallery-design-autocolumns-slide:last-child:nth-child(3n - 2) {
      grid-column-end: 3;
    }
}

Hey,
Thanks for that but this is what has happened...

 

13 hours ago, decoratedwolves said:

Hey,
Thanks for that but this is what has happened...

 

Try new code

@media only screen and (min-width: 1296px) {
    .sqs-gallery-design-autocolumns-slide {
      position: static;
    }
    .sqs-gallery-design-autocolumns {
      display: grid;
      grid-gap: 0 0;
      grid-template-columns: repeat(6, 1fr);
    }

    .sqs-gallery-design-autocolumns-slide:last-child:nth-child(2n - 7) {
      grid-column-end: 4;
    }
}