To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

How to centre image gallery or collage section in testament?

Solved
Lisagraphics
Tourist
15 0 1

Hi 🙂

 

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

 

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

Any help would be greatly appreciated 🙂

 

Thanks,

 

Lisa

 

Accepted Solution (1)

Accepted Solutions
suyash1
Shopify Partner
7145 870 1185

This is an accepted solution.

@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%;}
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

View solution in original post

Replies 14 (14)
suyash1
Shopify Partner
7145 870 1185

@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

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

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?

suyash1
Shopify Partner
7145 870 1185

@Lisagraphics - you will have stylesheet.css file

 

add to the end of that file

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

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

suyash1
Shopify Partner
7145 870 1185

@Lisagraphics - yes please

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

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 🙂

 

Lisa 🙂

suyash1
Shopify Partner
7145 870 1185

@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%;}
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

Hi,

 

I tried to replace it with the above but unfortunately it doesn't centre the squares 😞

Lisagraphics_1-1674617071528.png

 

suyash1
Shopify Partner
7145 870 1185

This is an accepted solution.

@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%;}
}
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

Hi,

Still no luck Im sorry 😞

suyash1
Shopify Partner
7145 870 1185

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

suyash1_0-1674617900383.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

Hi,

I cleared my cache and its still not working 😞 I'm usign google chrome

suyash1
Shopify Partner
7145 870 1185
Working at my end, should work at your too, not sure what's happening then
You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly
Lisagraphics
Tourist
15 0 1

It's working now 🙂 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