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

Solved
BoveSpring
Excursionist
17 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)

Accepted Solutions
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

Replies 5 (5)
Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
BoveSpring
Excursionist
17 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
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

View solution in original post

BoveSpring
Excursionist
17 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
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com