[Plugin: WP Biographia] social media link icons too large

Sounds like a CSS clash between another plugin or your theme. Is there a public facing URL where I can see this happening?

-Gary

Unfortunately not at this time. This is my first website and I have not even signed up with a host yet. Will a screenshot of the problem suffice?

Without actually seeing the problem happening and being able to look at exactly what CSS is being acted on by the browser I’m afraid not. It’s like saying “something’s not right, can you guess what it might be?” ??

One way forward would be for me to try and replicate this on one of my WordPress installs. That way I can poke around under the hood and see what’s happening. But as it’s a paid theme, I can’t download it. Could you send me a copy of the theme by email so I can install it and see if I can duplicate the same issue you’re having?

-Gary

I am not sure whether sending a premium themes that way is legal or something. I mean no disrespect of course. I am not very familiar with legal stuff like that. Anyway since I can’t direct you to my site yet, I’ll have to use the text links for now i guess. I’ll send you the link after I upload my site for public viewing.

If you are certain that this is a clash with another plugin, can I can remove them and check what is causing it? Or is this a clash with the theme?

Thanks for your time

I am not sure whether sending a premium themes that way is legal or something. I mean no disrespect of course. I am not very familiar with legal stuff like that.

This has happened many times in the past. People send me their themes, I test them on a local install, not on the public web, and then I delete them. But if you’re not comfortable with this, then I totally understand that.

If you are certain that this is a clash with another plugin, can I can remove them and check what is causing it? Or is this a clash with the theme?

No, I’m not certain of anything at the moment other than the fact that you’re saying that there’s an issue on your installation of WordPress. Without seeing the theme I can’t say whether it’s a theme vs. plugin CSS issue and without knowing precisely what plugins you have installed and what their configuration settings are I can’t say whether it’s a plugin vs. plugin CSS issue. Which is, I think, the whole point of this support thread.

While it certainly sounds like a CSS issue based on past experience, there’s simply too many possible permutations of interplay between the WordPress core, a theme and the myriad of plugins available for me to make anything other than an educated guess.

You could try reverting back to one of the stock WordPress themes, such as Twenty Ten or Twenty Eleven, to see if that makes a difference. You could also try disabling all of your plugins and then re-enabling one by one to see if that highlights where the issue could be coming from. All of these are standard troubleshooting tricks for WordPress.

But without me physically seeing a web page showing the issue, either on my local install or on a public facing web page, there’s only so much I can do.

I am doing my best to help here, but the options and information you’ve given me to work with are limited in the extreme.

-Gary

Yes i understand that working with a total newbie like me can be frustrating. Thank you for taking the time to reply. I have uninstalled the conduit theme and reinstalled twenty eleven. The icons have the correct size now. I will send you the theme to be tested. [ Support is offered via the forum and not email. ]

Thanks

That’s good news. Sounds like it might well be a theme CSS issue based on what you’ve found by reverting back to Twenty Eleven. This isn’t uncommon to be honest. Sadly it seems to be even more prevalent with “premium” themes. All my contact details are over on https://www.garygale.com/ (to save embedding an email address here for spam-bots to harvest).

I’ll take a look at what your theme is doing later this morning, once I get it from you. Thanks for helping out here.

-Gary

I’ve had a look at your theme’s CSS … the CSS in /wp-content/themes/conduit/css/screen.css at line 522 onwards defines this …

.content img {
	max-width: 98.3870968%;
	width: auto;
	height: auto;
	padding: 0.8064516%;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

… note the use of auto for the width and height specifiers. This means than any image embedded within <div id="content" class="content"> will automagically expand to fill the width of the enclosing block element. The CSS is making the assumption that the enclosing block element is correctly sized for the image, which may well be the case for the HTML and CSS that the theme emits, but is almost certainly not the case for any other HTML and CSS, such as that emitted by a plugin.

There’s no point in trying to change the theme’s CSS, as the whole of the layout depends on assumptions such as the one above and you’d effectively need to change the entire way in which the theme’s layout works which I can’t see happening.

However, if you change WP Biographia’s CSS at /wp-content/plugins/wp-biographia/css/wp-biographia.css at line 70 from this …

.wp-biographia-item-icon {
	height: 32px;
	width: 32px;
}

… to this …

.wp-biographia-item-icon {
	height: 32px !important;
	width: 32px !important;
}

… it should stop the theme being able to override the specific CSS that the plugin defines and resolve your issues, although I think the CSS for icon spacing could also use some tweaking as I think it’s also being impacted by the theme.

One important thing. All of the CSS (and JavaScript) that the plugin uses are minified for performance reasons. So if you do change wp-biographia.css you’ll need to then minify it as the plugin will always load wp-biographia.min.css and not pick up your local changes from the non-minified version.

-Gary

I have tested this and it works. The buttons display correctly and there are no more probs regarding the plugin. Thanks Gary. Really appreciate the help! ??

Hi there

I’m also having a similar problem. My social media icons display fine on my web page but they are extremely large on my RSS Feeds so are making my posts very long as they are displayed one after another. Have you got any ideas about this? It is when I view my feed via google reader that I notice the large icons.

My website is: https://www.greenthickies.com

Many thanks

Katherine

Looks like you’re running a version of the plugin that’s out of date. Support for social media link icons in RSS feeds was removed in v3.2 (see https://www.ads-software.com/extend/plugins/wp-biographia/changelog/).

Icons for links didn’t make much sense in an RSS feed and, short of embedding CSS in the feed XML, was getting ever more difficult to control. Each feed reader seems to have its own idea of how to render the feed and even getting the feed to look “good” in Google Reader and NetNewswire was taking up way too much time.

So from v3.2 onwards, the Biography Box in a feed ignores the setting for using icons in contact/social media links and emits them as plain text.

-Gary

Thank you so much for getting back in touch. Yes I hadn’t realised I hadn’t updated the plug in and it now works perfectly. Much appreciated.

You’re very welcome. Glad it got sorted out for you.

-Gary