0

One of my divs is having the following rules applied, even though they are not in my CSS, javascript or inline HTML. The margin:0px and padding:0px are breaking the layout of the site and I need to override them. Adding margin:initial and padding:initial inline to the element in question does not work.

enter image description here

The actual HTML is below. The div in question is col-sm-4 col-sm-offset-1. 

<section class="section">
        <div class="container">
            <div class="row">
                <div class="col-sm-4 col-sm-offset-1" style="">
                    <div id="ad-middle" class="panel panel-default" style="min-height:320px;">
                        <div class="panel-body" style="padding:0;">                             
                            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
                            </script>
                            <!-- AdSense Responsive -->
                            <ins class="adsbygoogle"
                            style="display:block"
                            data-ad-client="..."
                            data-ad-slot="..."
                            data-ad-format="rectangle"></ins>
                            <script>
                                (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
</section>

I am happy to edit the question and provide additional information and code, such as snippets from the CSS files, although they don't contain anything even close to the rules reported by the debugger.

Edit: I can confirm that it's the AdSense code that's altering the styling of the parent div. I have tried removing the AdSense code from inside the div, and that makes the margin:0 and padding:0 rules disappear. How do I override those rules?

Matthew S
  • 843
  • 2
  • 12
  • 26
  • Did you wrote that part of html or it's generated via a javascript plugin? –  Sep 15 '19 at 12:28
  • I don't know how it was written originally, but it's part of a static html file, if that's what you're asking. – Matthew S Sep 15 '19 at 12:30
  • Then, probably javascript is adding styles. disable javascript in your browser and see what happens. If it's so, you need to change your js file. –  Sep 15 '19 at 12:34
  • It's the AdSense code inside the div. I've tested it by removing that code, and the `margin:0` and `padding:0` are gone. How do I override them? – Matthew S Sep 15 '19 at 12:47
  • Add a script tag right after the line of AdSense script, and override styles there. –  Sep 15 '19 at 12:49
  • look at this: [link](https://stackoverflow.com/q/15241915/6311045) –  Sep 15 '19 at 13:01

1 Answers1

1

before doing everything, add an Id to your div "col-sm-4 col-sm-offset-1", and then add this script in your html file before closing body tag.

<script type="text/javascript">
    // you can get element by class name but in this example it's better to get it by Id. so I quote this line.
    // var x = document.getElementsByClassName("col-sm-4 col-sm-offset-1");

    var x = document.getElementById("adSenseDiv");

    // set your styles inside css variable as below
    var css = {
           color: 'purple',
           background-color: '#e5e5e5',
           height: '150px'
          };
    Object.assign(x.style, css);
</script>

or you can add this instead:

<script type="text/javascript">            
        var style = document.createElement('style');

        document.body.appendChild(style);

        // add your styles here
        style.sheet.insertRule('#adSenseDiv {color: darkseagreen}');
    </script>