Cindy Cindy - 5 months ago 29
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:

http://www.canadianoutback.com/events/crime_investigators.php

Answer

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

Comments