Resolution to Site Icons

[Basstimg]

I have already posted this but the issue was not resolved and I am unable to post a reply for some reaaon

This is my original message

I have 3 sites using theme x

On both my other sites I am using the following shortrtcode

[x_share title="Share" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" email="true"]

It works fine on the other sites and I have some css to make it styled to fit the site

.x-colophon.bottom .x-social-global a,
.page .x-entry-share .x-share{
font-size: 3.1rem !important;
height: 50px;
line-height: 50px;
width: 25px;

}

This code makes the icons look great on the other sites but on the current site the icons look too narrow on the bottom (overlapping) and in section one they are too far apart with the spacing resulting in one dropping a line on mobile view too. I really need the styling to be consistant across all three sites can you help please

I have put all info of sites etc in secure note !

This is support response

.x-colophon.bottom .x-social-global a, .page .x-entry-share .x-share {
    font-size: 50px !important;
    height: 50px;
    line-height: 50px;
    width: 50px;
    margin-left: 5px;
    margin-right: 5px; 
}

I implemented this code and it hasn’t;t worked I need section 1 icons to be 25 px width and the footer icons to be 50 px to get the correct styling can you please help

Site details in secure note

[christopher]

Hi there,

I went to your website and changed the wrapping element from a Classic Text to the Raw Content that is a better element for such a custom code.

Now the margin of the sharing icons are using the em value, that shows it will follow whatever is set in the typography. So you need to go to the other website X > Launch > Options > Typography settings and make the new site exactly like it.

Also, I added an additional piece of code to the Global CSS section of the options:

.x-colophon.bottom .x-social-global a, .page .x-entry-share .x-share {
    font-size: 3.1rem !important;
    height: 50px;
    line-height: 50px;
    width: 50px;
}

You still need to set proper settings in the typography options to make the icons as you like. Also please kindly make sure that you update the theme to version 5.2.5 and the Cornerstone to version 1.2.7.

Thank you.

[Basstimg]

Hi

Thanks for your prompt message unfortunately this doesn’t seem to resolve the issue.

I haven’t adjusted the Typography as I couldn’t;t see an icon setting and don;t want to change any other typography on the site. Also I haven’t made any changes in this area on both other sites in which the styling is perfect.

My cornerstone is already running 2.17 and says it is the most up to date version

I am unsure about the theme x update you mention how do I do this ? this is my most recent purchase and has been like it since I purchased it I’ve not had this issue on 2 other sites. (shown in previous secure note)

Finally the icons are not displaying correct on iPad sizes down and one is going underneath the others this is really messing with my styling and I need it to be the same as the other 2 sites.

Isn’t there just a code to have different global settings for icons for

1. Footer (bottom)

2. All other places on the site ?

Thanks Tim

[Joao]

Hi There,

You have the following code at the moment :

.x-colophon.bottom .x-social-global a, .page .x-entry-share .x-share {
    font-size: 50px !important;
    height: 50px;
    line-height: 50px;
    width: 50px;
    margin-left: 0px; 
     margin-right: 0px; 
}

You need to add some pixels to the margin left and right in order that the icons do not overlap each other.

Let us know how it goes.

Thanks!

[Basstimg]

Thanks I just altered that ton try to resolve I will add the suggestions you made. However this will not resolve issue 2 mentioned above with the icon being pushed below on any device below tablet size ? in section 1 of the page ?

[Joao]

Hi There,

I see now what you mean.

Please add the following CSS to Theme Options CSS in order to adjust it :

#cs-content .x-entry-share .x-share {

    margin: 0 0.25em;
}

Hope it helps!

[Basstimg]

THANK YOU SO MUCH that did it

[thai]

You’re most welcome.