Hello,
I need some help centering a couple of images on my webpage (Image below). I am using the theme “Vantage”. The issue comes from the “Gallery” addon. I have my images set at 33% which is the size I like them, but it is left aligning my images and I would like them to be centered. Is there a solution to fix this issue? Thanks!
Please share your store URL.
hello @CurtSaczalski
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
hello @CurtSaczalski
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 989px){
.index .image-gallery .flex-container .one-third {
width: 50%;
}
}
the only .css i have under assets is “stylesheet.css.liquid”. Is this the correct file? I also have a theme.js.liquid under assets.
Never mind, I pasted it in the stylesheet.css.liquid and it did center them, but it has resized them to 50%. Is there a way to keep the 33% size and center them?
Hey Natztech,
The solution you provided does center the graphics however the graphics look very large especially on desktop (Image below). Is there a way to reduce the size of these images but keep them centered?
hello @CurtSaczalski
please Go to Online Store-> Theme->Edit code then go to assets/stylesheet.css ->paste the below code at the bottom of the file.
do you want to look like this https://nimb.ws/6dG71x remove the last code and update with this code?
@media only screen and (min-width: 749px){
#shopify-section-1626657069c1a00803 .flex-container {
display: flex;
justify-content: center;
width: 60%;
margin: 0 auto !important; }
#shopify-section-1626657069c1a00803 .flex-container .gallery-block .homepage-promo{
width: 100%;
}
}
That works great, thank you!