What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How to make dynamic collection list move to center page? (Empire theme)

Solved

How to make dynamic collection list move to center page? (Empire theme)

BoveSpring
Shopify Partner
18 0 2

Hi!

I have a problem with a collection list. The usual setting was for 4 items showing on the top of the page, but right now we want to show only 3 items, and now it has empty space on the right side.

Do you have any idea on how to move those 3 items to the center, make it even on both sides, so it doesn't look too much empty on the right side?

Here's the URL: https://bove.co/collections/homepage-play 

Screenshot 2021-10-22 161703.png

Thanks!

Accepted Solution (1)
Zworthkey
Shopify Partner
5581 642 1583

This is an accepted solution.

Hii, @BoveSpring 
Paste this code on to[p of the theme.scss file.

@media screen and (min-width: 860px){
ul.home-section--content.collection-list--inner {
    margin-left: 22% !important;
}
}

Thank You.

View solution in original post

Replies 5 (5)

Zworthkey
Shopify Partner
5581 642 1583

Hii, @BoveSpring 
Do you want to like this?
download (21).png
Thank You.

BoveSpring
Shopify Partner
18 0 2

Hi @Zworthkey 

Actually I want to make them more in the middle of the page, so the empty spaces will be even on both sides.

Zworthkey
Shopify Partner
5581 642 1583

This is an accepted solution.

Hii, @BoveSpring 
Paste this code on to[p of the theme.scss file.

@media screen and (min-width: 860px){
ul.home-section--content.collection-list--inner {
    margin-left: 22% !important;
}
}

Thank You.

BoveSpring
Shopify Partner
18 0 2

Hi @Zworthkey 

The codes worked!

But after I checked our homepage https://bove.co/, the collection list on top of the page was moved to the right. 

Screenshot 2021-10-22 171012.png

FYI we have this installed on the bottom of the theme.scss file actually

@media screen and (min-width: 860px){
#shopify-section-1599186920696 .home-section--content {
    margin-top: 1.75rem;
    text-align: center;
    justify-content: center;
    display: flex;
}
}

We put it there previously to make the collection list displayed in middle in the top of the homepage, thinking it will affect other pages as well if we have less than 4 items.

Apparently not.

Is there any way that we can have one set of code to tackle this issue?

Zworthkey
Shopify Partner
5581 642 1583

@BoveSpring 
Remove  the code which I have given you so,
I can solve it.
Thank You.