How can I center images on a collections list page?

Store Design
1

Hello,

I am trying to center the images on the collections list page. I will eventually be adding more images on the same page so I will need it to always center them. I would like to have 3 images per row. Any help would be much appreciated. It would be an added bonus if we could put a small space between each image.

Thanks for all the help!

Thanks,

Justin

2 Likes
2

@docgraves

Please share your store URL and a screenshot.

3

@docgraves

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Thanks for the reply @dmwwebartisan . The website is Girl Down the Street. Please let me know if you need anything else.

docgraves_0-1628650291261.png
docgraves_0-1628650291261.png1933Ă—878 207 KB

5

Hello,

Thank you for your response. Here is the link - Girl Down The Street.

I appreciate it!

6

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
    .featured-collection .collection-grid{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    }
7

I tried that and nothing changed.

Hey @LitExtension , I appreciate your reply. I tried what you suggested and unfortunately, nothing changed on the site. I have included screenshots.

docgraves_0-1628738013747.png
docgraves_0-1628738013747.png1907Ă—864 71.1 KB

docgraves_1-1628738128778.png
docgraves_1-1628738128778.png1906Ă—1033 239 KB

Thank you!

8

You are referring to the collections list page?
Please change the code:
.grid–collection-grid{
justify-content: center;
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 750px){
.collection-grid__item {
height: 400px;
width: calc(100% / 3);
}
}

1 Like
9

I changed the 100% to 50% and that was perfect.

Thanks a bunch! Been trying for 5 evenings to get that right!