Hi thumoo,
It sounds as if you are encountering issues with inline CSS. !important should override that if the CSS specificity is correct, but it can be tricky to get that specificity correct. Let me know if I’m incorrect in diagnosing this as an inline CSS issue. If I am right, a “better” solution than overriding with !important is to remove or alter the offending inline CSS altogether.
To do this, go into the Ad Blocking Detector dashboard, and edit the shortcode giving you this width trouble. In the two editors, click the “Text” tab to open the source code. Somewhere in there should be an HTML attribute called “style,” and there will be a width set there. The default shortcode, for example, has the following:
<div style="text-align: center; padding: 10px; border-radius: 15px; background-color: #585858; color: #ffffff; width: 300px; height: 250px;">
You just change width from 300px to whatever you want it to be, or remove the width altogether.
If you need to do this in your child CSS file instead, you’ll need to use CSS to target the element with the inline CSS, not just the .ABD_display and .ABD_display_adblock. For the sample shortcode, that would be something like this:
.ABD_display_adblock div[style] {
width: 130px !important; /* Your width goes here. */
}
I hope this has helped. If not, let me know.
Thread Starter
thumoo
(@thumoo)
Thank you. Changing it inline worked perfectly. I really don’t know why I didn’t think to look there. But I removed the width altogether and now it fits perfectly.
Thanks.
