Footer social media icons position change

Support
#1

Hi Guys,

I would like to display social media icons in the same line on the right hand side as the paragraph that is a default view in x theme.

The paragraph that is normally centered is to be moved to the left and social media icons floated to the right, all in the same line.

How do I achieve that?

#2

Hi There,

Thanks for writing in!

Please add this CSS to your theme option -> Global CSS and let us know how this goes.

footer.x-colophon.bottom .x-nav {
float: left;
margin: 0px;
}
footer.x-colophon.bottom .x-social-global {
float: right;
text-align: right;
min-width: 300px;
}

Hope this helps!
Thanks

#3

Hi Basanta,

Thanks for the quick response, this code moves the social media icons to the right but does not deal with the paragraph above.

My aim is to place the icons to the right of the paragraph, on the same line.

At the minute paragraph is center and icons are floated right within underneath line.

Michal

#4

Hi There,

Sorry for the confusion!

Please replace the CSS with this.

   footer.x-colophon.bottom .x-colophon-content {
    float: left;
    margin: 0px;
    }
    footer.x-colophon.bottom .x-social-global {
    float: right;
    text-align: right;
    min-width: 300px;
    }

Hope this helps!

Thanks

#5

Hi Basanta,

This code still places two elements on different lines.

#6

Hi There,

Please send us your website URL, so that we can suggest you better.

Thanks

#7

Hi Basanta,

I unfortunately can’t do that, very sorry but access is only open for myself and the site is under construction - locked.

There are no custom alterations done to the footer bar color change, font size.

All the rest is stock as is in x theme you have.

Should I be coding any of the footer files manually?

If so which one and which function is responsible for the output of social icons?

Michal

#8

Hi Michal,

This layout cold be easily achieve with PRO instead of X.

Pro offers 100% flexibility when using the footer builder and same goes for the header.

If you wish do do that in X via CSS please turn off under construction so we can take a closer look.

Also please use csslint website to check for errors on your THeme Options > CSS

Hope it helps

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.