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

Store Design
1

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?

Thank you for your assistance in advance.

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

2

Hello @YK92

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code below:

.footer-block .rte, .footer-title, .footer-title p, .footer-title__button, .footer-bottom{
  text-align: center;
}
.footer-block__logo-image{
  margin: 0 auto;
}
@media only screen and (max-width: 767px){
  .social-sharing-wrapper {
    justify-content: center;
  }
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

3

@YK92

Please add the following code at the bottom of your css file.

//for desktop
@media only screen and (min-width: 1024px){
.footer-blocks {
  text-align: center !important;
}
}

//for mobile
.footer-blocks {
  text-align: center !important;
}

@media only screen and (max-width: 767px){
.social-sharing-wrapper {
    justify-content: center!important;
}
}
.footer-copyright{
text-align: center !important;
}
.footer-block__logo-image{
margin: 0 auto;
}
4

Hi @YK92 ,

This is Kate 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-block,
.footer-copyright {
    text-align: center !important;
}
.footer-block__logo-image {
    margin: 0 auto !important;
}
.social-sharing-wrapper {
    justify-content: center !important;
}

I hope it would help you