How can I center the footer text columns in the Dawn theme?

Store Design
1

Hi there,

I’m trying to centre the text columns on the footer of our site using the Dawn theme, but I can’t seem to get it correct. I have tried the below code but this centres everything, I would like it to look like the attached image, with the entire columns centralised not all of the text.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-footer.css->paste below code at the bottom of the file:

.footer__content-top .grid__item {
text-align: center !important;
}
.footer-block__details-content .list-menu__item–link {
justify-content: center !important;
}

If someone could tell me the correct code to use to centralise the columns that would be appreciated. Our store is
https://cbdasylum-com.myshopify.com/

2

Hi @Lanacbda !

Seems like you need to use grid instead flexbox for this footer. It will support future changes for your site.

But the easiest fix for it is use this css line in your styles

.footer-block.grid__item.footer-block--menu:nth-child(3) { width: 0; }
3

Hi @Lanacbda

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Go to Online Store > Themes > Edit Code > base.css , after paste this code to bottom of file

ul.footer-block__details-content.list-unstyled li,h2.footer-block__heading{

text-align:center;

margin-right:0 !important

}

Best Regards;

Pagefly

4

Hi @Andrei_Kuchuk

thank you for this. Where would i paste this code?

5

Hi @PageFly-Victor

Is there a different code that doesn’t centre all of the text just the columns? so the blocks of text are in the middle but the drop down links are still aligned to the left of the text box?

6

you can try it

ul.footer-block__details-content.list-unstyled li{

width: 60% !important;

margin-right: 0px !important;

margin-left: auto !important;

}

h2.footer-block__heading{

text-align:center

}

7

Seems like you need past the code into base.css file

8

Hi @Lanacbda

pls read this post, it’s same issue

https://community.shopify.com/c/shopify-design/text-align-center-is-being-naughty/m-p/1712203#M457766