Cindy Cindy - 1 year ago 130
CSS Question

How to override inline CSS (specifically a div with certain class) with external CSS?

I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.

The Google+ button seems to automatically generate a div with inline CSS styling:

<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">

I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:

div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}

Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:

Answer Source

Your CSS selector should be:

.google_plusone_iframe_widget {width:auto !important; height:auto !important;}

Remove that [style] attribute in your selector, and there's no need to specify the div tag.

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download