Solved

Help Collection List Center Page (Empire theme)

BoveSpring
Shopify Partner
18 0 2

Hi!

Can someone help me to put the collection list on the center?

We usually have 4 items, now we only want to show 3. 

The URL is https://bove.co/

Screenshot 2021-10-18 170429.png

Thanks!

Accepted Solutions (2)
Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

.collection--item {
    margin-left: 80px !important;
    text-align: center;
}

 

@BoveSpring 
Add this code in theme.scss or theme.css

Thank you.

View solution in original post

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@BoveSpring 

Please add the following code at the bottom of your assets/theme.scss.liquid file. 

@media screen and (min-width: 860px){
#shopify-section-1599186920696 .home-section--content {
    margin-top: 1.75rem;
    text-align: center;
    justify-content: center;
    display: flex;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

Zworthkey
Shopify Partner
5581 642 1565

@BoveSpring 
Hi,
Welcome to the Shopify community.
How may I help you?
I can't get your issue.
In Which page it's occur
kindly Share the screenshot.

Thank you.

BoveSpring
Shopify Partner
18 0 2

Hi!

It's on the homepage https://bove.co/.

We usually have 4 collections in a row for the collection list, it looked ok, no empty space. When we only want to show 3 collections, and now there's an empty space on the right.

Can you help me to make the collection list on the center page? Make it even? Because now it looks like the collection list are align on the left side.

InkedScreenshot 2021-10-18 202542_LI.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Zworthkey
Shopify Partner
5581 642 1565

This is an accepted solution.

 

.collection--item {
    margin-left: 80px !important;
    text-align: center;
}

 

@BoveSpring 
Add this code in theme.scss or theme.css

Thank you.

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

@BoveSpring 

Please add the following code at the bottom of your assets/theme.scss.liquid file. 

@media screen and (min-width: 860px){
#shopify-section-1599186920696 .home-section--content {
    margin-top: 1.75rem;
    text-align: center;
    justify-content: center;
    display: flex;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
BoveSpring
Shopify Partner
18 0 2

Thank you so much! It worked!

Both set of codes worked, though different outcome when I open the page via mobile.

dmwwebartisan
Shopify Partner
12282 2546 3694

@BoveSpring 

Please share collection page URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app