Solved

How to centre image gallery or collage section in testament?

Lisagraphics
Tourist
23 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)
suyash1
Shopify Partner
8992 1117 1466

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

View solution in original post

Replies 14 (14)

suyash1
Shopify Partner
8992 1117 1466

@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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 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
8992 1117 1466

@Lisagraphics - you will have stylesheet.css file

 

add to the end of that file

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 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
8992 1117 1466

@Lisagraphics - yes please

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 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
8992 1117 1466

@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%;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 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
8992 1117 1466

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

Hi,

Still no luck Im sorry 😞

suyash1
Shopify Partner
8992 1117 1466

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

suyash1_0-1674617900383.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 0 1

Hi,

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

suyash1
Shopify Partner
8992 1117 1466
Working at my end, should work at your too, not sure what's happening then
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
Lisagraphics
Tourist
23 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