Centering footer social icons

Hey there Silviu,

You should be able to place those two in two lines and center them both by adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

.fusion-copyright-notice {
  width: 100%;
  clear: both;
  float: left;
  text-align: center;
}

.fusion-social-links-footer {
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

If the code doesn’t work please keep it added and let me know so i can take a look ??

Cheers,
Bojan

Hi Bojan,

I’ve added the code to style.css of my child theme but nothing changed.

Thank you ??

Hey again silviuclg,

I’ve checked your site and I can’t see the code being applied there. After closer inspection of your child theme style.css I’ve found that you’re missing a closing bracket “}” in the code just above the one I provided which is causing this.

Please add the closing bracket there, see screenshot https://screencast.com/t/RF5TBjSOO.

Hope this helps ??

Best regards,
Bojan

Hi Bojan,

Cool, but now is https://www.screencast.com/t/9HEZ51ynYtrd and I would like to be https://www.screencast.com/t/ZPZBaIPU3 .

Thhhankss !!!

Hey again silviuclg,

In that case we’ll have to do this differently. Please replace the code I provided above with the following:

.fusion-copyright-content {
  position: relative;
  height: 72px;
}

.fusion-copyright-notice {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}

.fusion-social-links-footer {
  width: 100%;
  position: absolute;
  top: 0;
}

This should be the result https://screencast.com/t/H3e2nZUy3o.

Hope this helps ??

Best regards,
Bojan

Hi Bojan,

This is the result: https://www.screencast.com/t/NFYtnDfP7V

Doesn’t work.

Thanks for the patience.

Hey again silviuclg,

Sorry about that one, I was deactivating the code in inspector and forgot to center the socials. Please replace the code with this one:

.fusion-copyright-content {
  position: relative;
  height: 72px;
}

.fusion-copyright-notice {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}

.fusion-social-links-footer {
  width: 100%;
  position: absolute;
  top: 0;
  text-align: center;
}

This should do the trick ??

Cheers,
Bojan

Hei Bojan,

Yess !!! It’s work now ??

I really really apreciate.

Thank you very much and have a nice day !!!

C. Silviu

Hey Silviu,

Glad that worked ??

Have a nice day too!

Cheers,
Bojan

Hi again Bojan,

Today I noticed that if I accessing the website from mobile, the social links from footer are not aligned.

I’ve tried some tricks but nothing. Can you help me with that ?

I really appreciate.

Thanks.

https://www.screencast.com/t/ruN6chzg

website: https://www.p4tru.ro

Hey again silviuclg,

Please try adding the following CSS as well:

@media only screen and (max-width: 800px) {
.fusion-row .fusion-social-links-footer {
    width: 100%;
}
}

Hope this helps ??

Cheers,
Bojan

Hi Bojan,

Thank you.

It works fine only on the horizontal mode.

The social media and the copyright section in the footer overlay each other on the vertical position.

See the attachement: https://www.screencast.com/t/eDOh8ZANtGz

Do you have any idea why ?

Thanks.

C. Silviu

Hey again C. Silviu,

Can you please try adding the following code:

@media only screen and (max-width: 507px) {
.fusion-body .fusion-social-links-footer {
    top: -40px;
}
}

This should move the socials slightly to the top when this happens.

Hope this helps.

Cheers,
Bojan

Hi,

I have added this code together with the previous code you gave me.

These are the resutls: https://www.screencast.com/t/snnlbQurrAz

– vertical: still overlay each other;
– horizontal: now is too much empty space between the social icons and the copyright content;

Is there any way to obtain the required result without this empty space ?

Thanks a lot for your patience.

C. Silviu

Hey again C. Silviu,

You should be able to fix this by adding another media query that will push it slightly to the top on those resolutions when the socials break in two lines which should be ~400px in width. So Please try adding the following CSS:

@media only screen and (max-width: 400px) {
.fusion-body .fusion-social-links-footer {
    top: -60px;
}
}

The space is mostly the content area above it so I’m not sure if you want to make modifications to that too.

Best regards,
Bojan