Aligning Custom Collections Centered On A Page

Technical Q&A
1

Hello Shopify Community,

I have created some custom collections pages, using instructions that were posted here in Shopify Community.

I have made it go from being one image aligned vertically on top of each other to having them line up horizontally now. The issue I am having now is how to get the collection images & titles aligned centered on a page. It’s a collection grid. I have gone through other threads and tried some of the recommended solutions, (most of them for the free themes). but nothing seems to work.

We are using a paid Shopify theme. I know it just requires a some CSS, but nothing I am doing is working, so I am hoping that someone here can help.

Here is a link to one of the collection pages: https://swahili-wholesale.myshopify.com/pages/dining

Password: bluvah

Thanks in advance. I can paste the collection code if need be.

Sincerely,

Todd

2

add this on your CSS file and play with numbers to get the best positions

div#content { padding-left: 9% !important; }

3

Hi there

In your theme.css/theme.scss file (I think for you its called stylesheet.css) navigate all the way to the bottom and 6th to last class called .grid-uniform

In the .grid-uniform class add justify-content: center;

And viola all the images and text should align to the middle of the page.

Result

result.PNG
result.PNG1853×643 83.5 KB

Regards,

Martin

4

@Roxee541

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > stylesheet**.css** and paste this at the bottom of the file:
.grid-uniform {
    justify-content: center;
}

Please let me know whether it works.

Kind regards,
Diego

5

Thanks Diego,

That was really simple and I am kind of embarrassed as I tried everything else except the most obvious. I got all caught up in some sort of special grid CSS.

Thanks again!

Todd