How to center the content of a UL-list with CSS?

Solved
highpowered
Tourist
5 0 2

Hi everyone

Does anyone know what CSS I can add to the theme-file, so that those elements (marked red in see screenshot) are centered instead of left-bound?

I've tried several things like "align", "justify" but nothing seems to work. Also using "!important" doesn't help.

Link: highpowered.ch

Thanks so much!

Best regards

Tobias

Screenshot 2021-04-16 at 15.35.56.png

dmwwebartisan
Shopify Partner
5841 1337 1714

This is an accepted solution.

@highpowered 

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

@media only screen and (min-width: 720px){
.dynamic-collection-list--item {
float: unset !important;
margin: 0 auto !important;
display: inline-block !important;
}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Ninthony
Shopify Partner
1798 260 709

This is an accepted solution.

You can use the flexbox model. Here's a nice little overview:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

Here's the code you'll need to add, this will make it so it's centered and the items will stack on mobile:

 

 

.dynamic-collection-list--inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.dynamic-collection-list--inner li {
    min-width: 320px;
}

 

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
highpowered
Tourist
5 0 2

Wow, thanks so much for the fast solutions!

I forgot to specify how it should look on mobile (2 categories per row, and also centered), but I found I can use your code like this, then it works for mobile as well.

Thank you!!

 

@media only screen and (min-width: 720px){
.dynamic-collection-list--item {
float: unset !important;
margin: 0 auto !important;
display: inline-block !important;
}
}

@media only screen and (max-width: 720px){
.dynamic-collection-list--item {
float: unset !important;
margin: 0 auto !important;
display: inline-block !important;
}
}