What is the best way to limit the dimensions of a responsive Google ad?

Question

What is the best way to limit the dimensions of a responsive Google ad?

I have been using this responsive Google ad code on my website to display ads.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-REMOVED"
     data-ad-slot="REMOVED"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

However, the ad displayed is too large. I want to restrict Google ads to a space of 1000px width and 100px height on my website. I have tried creating a div box with max-height:100px; and max-width:100px, but it did not work. Can anyone provide a solution? I am using Bootstrap, so a Bootstrap-based solution would be preferred, but not mandatory.

<div class="row gutter-vr-30px align-items-center">
    <div class="col text-center h-100">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-REMOVED"
             data-ad-slot="REMOVED"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>
</div>

html css bootstrap-4

Answer 1

Answer №1

Let me offer you an analogy to clarify the issue you're facing. Imagine a parent setting limits on their child's growth by specifying maximum height and width. The child, however, can still surpass these limits.

While I haven't personally dabbled in Google ads, it seems like the key lies in adjusting the ad size on Google's platform. Perhaps there's a way for you to customize how the script displays the ad within your AdSense settings, rather than solely relying on HTML/CSS.

#container {
  display: flex;
  justify-content: space-around;
}

#d1,
#d3 {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  background: red;
}

#d2 {
  width: 50px;
  height: 50px;
  background: blue;
}

#d4 {
  width: 200px;
  height: 50px;
  background-color: blue;
}

<div id="container">
  <div id="d1">
    <div id="d2">
    </div>
  </div>
  <div id="d3">
    <div id="d4">
    </div>
  </div>
</div>

Answer 2

Let me offer you an analogy to clarify the issue you're facing. Imagine a parent setting limits on their child's growth by specifying maximum height and width. The child, however, can still surpass these limits.

While I haven't personally dabbled in Google ads, it seems like the key lies in adjusting the ad size on Google's platform. Perhaps there's a way for you to customize how the script displays the ad within your AdSense settings, rather than solely relying on HTML/CSS.

#container {
  display: flex;
  justify-content: space-around;
}

#d1,
#d3 {
  width: 100px;
  height: 100px;
  max-width: 100px;
  max-height: 100px;
  background: red;
}

#d2 {
  width: 50px;
  height: 50px;
  background: blue;
}

#d4 {
  width: 200px;
  height: 50px;
  background-color: blue;
}

<div id="container">
  <div id="d1">
    <div id="d2">
    </div>
  </div>
  <div id="d3">
    <div id="d4">
    </div>
  </div>
</div>

What is the best way to limit the dimensions of a responsive Google ad?

Answer №1

Similar questions

Retrieval of jQuery remove() method

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

Utilizing the Bootstrap grid system to seamlessly display images

I'm experiencing an issue when trying to align TextPath to the center in an SVG file - a certain character

Inserting a PHP variable ($username) into a form field

Retrieving the chosen option from a radio button

Is there a way to switch out the WordPress page title for an image instead?

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

CSS footer element refuses to disappear

Unable to conceal the scrollbar while keeping the div scrollable

Using the combination of Chrome browser, Lucida Grande font, and word-wrap

Trouble with CSS: struggling to remove the bullet point from the <li> tag

Learning how to track mouse wheel scrolling using jQuery

The setInterval function does not function properly in IE8 when set to 0

Obtain the index by clicking on an element within an HTMLCollection

The search for 'post_sharing' with parameters ('',) did not yield any results. No matching patterns were found

Custom background options for Wordpress developer

An easy guide on implementing the if control statement within a Jinja2 embedded HTML document

The button is unable to contain all the text, causing it to spill out instead of wrapping to