How to centre image gallery or collage section in testament?

Store Design
,
1

Hi :slightly_smiling_face:

I am using the testament theme and was wondering if anyone knows how to change the alignment of image gallery or collage sections to be centred to the webpage?

It gives you the option for the images to be 25%, 33%, 50% or 100% in width in testament. I like the size 25% and I will have 3 images, but what happens is they are alligned to the left instead of the centre.

Lisagraphics_0-1674610194866.png
Lisagraphics_0-1674610194866.png2278×1522 100 KB

This is the website https://wardrobesbydesign.au/ and the password is hi

Any help would be greatly appreciated :slightly_smiling_face:

Thanks,

Lisa

2

@Lisagraphics - this css is for this particular section and desktop view, please add this and check

@media screen and (min-width:750px){
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .grid__wrapper.row{display: flex; grid-gap: 0;}
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .gallery__item{padding:1%;}
}

suyash1_0-1674615026722.png
suyash1_0-1674615026722.png1366×768 78.2 KB

3

Hi,

Sorry I’m not very good at code, can I confirm I would add this to the gallery.liquid section?

Any particular place in that section I need to add it or just at the bottom?

4

@Lisagraphics - you will have stylesheet.css file

add to the end of that file

5

Hi unfortunately it wouldn’t let me save it before the end schema line and if I save it after that line at the very bottom it just shows up as text on the home page. Does it need to go in the stylesheet.css??

6

@Lisagraphics - yes please

7

Hi,

In the stylesheet it did work, however it overrided the 25% size that I had chosen and made the 3 blocks 3 even sizes. Is there the way to keep the 25% size but just centre the 3 boxes maybe?

Thank you for your help :slightly_smiling_face:

Lisa :slightly_smiling_face:

8

@Lisagraphics - remove previous css and update with this one

@media screen and (min-width:750px){
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .grid__wrapper.row{display: flex; grid-gap: 0;}
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .gallery__item{padding:1%; flex-basis: 23%;}
}
9

Hi,

I tried to replace it with the above but unfortunately it doesn’t centre the squares :disappointed_face:

Lisagraphics_1-1674617071528.png
Lisagraphics_1-1674617071528.png2928×1473 74 KB

10

@Lisagraphics - remove previous and add this, this will work

@media screen and (min-width:750px){
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .grid__wrapper.row{display: flex; grid-gap: 0; justify-content: center;}
#shopify-section-template--16088029135033__01c9e9aa-531b-4131-bf4a-a4fc3bf9a453 .gallery__item{padding:1%; flex-basis: 23%;}
}
11

Hi,

Still no luck Im sorry :disappointed_face:

12

@Lisagraphics - it is working, clear history and cache on your end,

suyash1_0-1674617900383.png
suyash1_0-1674617900383.png1366×768 76.7 KB

13

Hi,

I cleared my cache and its still not working :disappointed_face: I’m usign google chrome

14

Working at my end, should work at your too, not sure what’s happening then

15

It’s working now :slightly_smiling_face: I don’t know why it was taking so long I didn’t change anything and just refreshed and it’s centre alligned!

Thank you for your help I really appreciate it