How can I center align all footer elements on my website?

Store Design
, , ,
1

footer.png
footer.png1886×359 23.4 KB

Current structure

Hello,

I’d like to have every column of text center aligned, as well as contact us, hours and logo being directly aligned with the middle of the page.

How can I center align all footer elements on my website for both desktop and mobile?

Current structure:

CONTACT US HOURS LOGO

INSTAGRAM

Prefer structure:

CONTACT US

HOURS

LOGO

INSTAGRAM

Thank you for your assistance in advance.

https://www.yook92.com (password: 692)

2

@YK92

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.footer-blocks{
  display: block !important;;
  text-align: center !important;;
}
.footer-block__logo-image{
  margin: 0 auto;
}
.footer-block:not(:first-child){
  margin-top: 30px;
}
.footer-copyright{
  text-align: center
}
@media only screen and(max-width:768px){
  social-sharing-icon{
    margin: 0 auto;
  }
}

This works well for your site.

1 Like
3

Hi @YK92 ,

You can do that by adding this CSS code to your theme.css or theme.css.liquid file from Online store > Themes > Edit code > Assets

.site-footer { text-align: center; }
.footer-block__logo-image { margin: 0 auto; }
.social-sharing-wrapper { flex-direction: column; }
4

Hi @YK92 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.footer-blocks{
  display: block !important;;
  text-align: center !important;;
}
.footer-block__logo-image{
  margin: 0 auto;
}
.footer-block:nth-child(2),
.footer-block:nth-child(4)
{
  margin-top: 20px;
}
.footer-copyright{
  text-align: center
}

Hope my answer will help you.

Best regards,

Victor | PageFly