Share icons not centered

Hi. I noticed a strange problem when running Technews on my iPhone. The share icons in articles, which look very sexy by the way, are not centered properly. Only some of them are causing problems - these ones are "micons" - the main one, email and print. Happens on iPad as well. It happens on the demo page as well so I guess it's not just me - see the image attached. Does anyone have any ideas how to solve the problem?

Hi

Please tell me what device are You using exactly. I do not have this problem using my phone.

It happens on iPhone 5S...

Hi

I'm afraid I do not have this problem on my iPhone 5s. Are Your screen from our demo or maybe it's related to Your website only ?

Yes, my screen was from the demo site. And it happens on my iPad Air 2 as well.

Hi

Here a screenshot from iPad Air 2. I do not know what it's going on and why it's displaying wrong for You on same devices. I'm gona report this to programmers for further chjeck. Will inform You when I'll hear from them.

Hi

Luckily programmers had the same problem visible. Here is a piece of code which should be added to override.css to fix it:

Code: Select all

.single-page .header-wrap .item-social-icons > .micon,
.single-page .header-wrap .item-social-icons > a > .fa,
.single-page .header-wrap .item-social-icons > a > .micon {
    text-align: left;
    text-indent: 13px;
}
.single-page .header-wrap .item-social-icons > a > .fa {
    text-indent: 15px;
}


Hmm that's good - means I'm not the only one who sees it. But I'm afraid the solution doesn't work - do I have to "turn on" the override.css somehow? Because I added this code to it, and after refreshing the website several times on my iPhone the icons still look the same.

Hi

In template settings in advanced section You will find an option to activate using override.css file.

Hi

I just saw that programmers has closed this error report. This may mean that packages are already updated with this fix, so may may just try to update template to the latest version.

Thanks a lot. I remembered that there was some button to override the css but couldn't find it. I'd rather not update the whole template cause I changed lots of things in it, but the icons now work perfectly on my iPhone and iPad. Thanks again!

Hi

Ok. Just an information. If You are talking about changes to CSS than You should use override.css file to separate all changes. This way You will be able to still update Your template.