Shopify themes, liquid, logos, and UX
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.
This is the website https://wardrobesbydesign.au/ and the password is hi
Any help would be greatly appreciated 🙂
Thanks,
Lisa
Solved! Go to the solution
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%;}
}
@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%;}
}
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?
@Lisagraphics - you will have stylesheet.css file
add to the end of that file
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??
@Lisagraphics - yes please
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 🙂
@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%;}
}
Hi,
I tried to replace it with the above but unfortunately it doesn't centre the squares 😞
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%;}
}
Hi,
Still no luck Im sorry 😞
@Lisagraphics - it is working, clear history and cache on your end,
Hi,
I cleared my cache and its still not working 😞 I'm usign google chrome
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024