How can I center three image blocks on my webshop page?

[Anne-Marieke]

Hi there!

I have a (probably simple) question for you.

On one page of my webshop, I’d like to centre the blocks of 3 sub collections that I made:

On another page I have four blocks, and it looks good:

The webshop is www.bickerybbq.com

Thank you in advance!

[Sanjay25]

Hey,

You can add a few css in grid class. Add the below css and it will works for you.
.template-collection .grid {

display: flex;

align-items: center;

justify-content: center;
}

Screenshot: https://d.pr/ffxQUk

Let me know if still it will not works for you.

Thanks!

[Jasoliya]

Hi @Anne-Marieke

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset-> theme.css-> paste bellow code in bottom of file

#shopify-section-collection-show-themacollecties ul.grid{display: flex; justify-content: center; flex-wrap: wrap;}

Best regard

[GemPages]

Hello @Anne-Marieke

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store → Theme → Edit code.

2. Open your assets/theme.css theme file.

3. Add the code at the end of the file:

#shopify-section-collection-show-themacollecties ul{
   display: inline-block;
   width: 100%;
   text-align: center;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[PageFly-Victor]

Hi @Anne-Marieke

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly

[INA_MSWEB]

Hi @Anne-Marieke

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.template-collection .grid.grid–uniform {display: flex; justify-content: center;}

Regards,

San

[Anne-Marieke]

Thank you! This was the easiest solution for now
Is there a way to adjust this piece of code to make the images slighty larger as well?

[Anne-Marieke]

Thank you! This was the easiest solution for now
@Jasoliya Is there a way to adjust this piece of code to make the images slighty larger as well?

[Jasoliya]

HI

try to add this code

@media only screen and (min-width: 750px){
.template-collection #shopify-section-collection-show-themacollecties .grid .grid__item.medium-up--one-quarter{width: 33.33%;}
}

[Anne-Marieke]

Thank you, that worked great!