Centre product and collection content dawn theme 11.0

Store Design
, ,
1

Hello

i am having trouble finding how to centre content on my site
as you can see, it is left-aligned. I want the product and collection cards to be centre aligned

my site is www.sundaymass.store

password is CRUSADE

1 Like
2

Include this style in your stylesheet:
.collection-list, .product-grid {
justify-content: center;
}

3

Hi @massmonster

Do you mean this?

Made4uoRibe_0-1721206344697.png
Made4uoRibe_0-1721206344697.png1063×372 27.3 KB

Made4uoRibe_1-1721206445713.png
Made4uoRibe_1-1721206445713.png1181×394 103 KB

If it is, check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.title-wrapper-with-link {
    justify-content: center;
}
.collection-hero__description, .collection-hero__title {
        max-width: 100%;
        text-align: center;
    }
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Hello @massmonster

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 895
search this code

.grid {
display: flex;
margin-bottom: 2rem;
padding: 0;
list-style: none;
column-gap: var(--grid-mobile-horizontal-spacing);
row-gap: var(--grid-mobile-vertical-spacing);
flex-wrap: wrap;
justify-content: flex-start;
}

and replace with this code.

.grid {
display: flex;
margin-bottom: 2rem;
padding: 0;
list-style: none;
column-gap: var(--grid-mobile-horizontal-spacing);
row-gap: var(--grid-mobile-vertical-spacing);
flex-wrap: wrap;
justify-content: center;
}

and the result will be

23.png
23.png1269×919 224 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like