Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths.

Check out the CSS code below:

<style>

@media (min-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }
}

@media (min-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}
</style>

Also, here's how I've set up my HTML:

  <ins class="adsbygoogle adslot-desktop"
   data-ad-client="xxxxx"
   data-ad-slot="xxxxxx"
   data-ad-format="auto"></ins>

When the screen width is over 500px, the expected 468x60 ad appears. However, under 500px it shows a 320x100 ad instead of the desired 320x50 ad.

Any ideas why it's not showing the specified size as intended?

htmlcssadsense

Answer №1

It is advised to remove the data-ad-format attribute, as it utilizes "smart sizing", which dynamically calculates the required size based on the parent container's width and determines the best height accordingly.

We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width.

To learn more about responsive ad units, you can visit:
https://support.google.com/adsense/answer/3213689

If you are looking for an "exact size per screen width" approach, you can use the following code snippet:

<style>
.adslot-desktop { width: 320px; height: 50px; }
@media (min-width: 500px) { .adslot-desktop { width: 468px; height: 60px; } }
</style>
 <ins class="adsbygoogle adslot-desktop"
  style="display:inline-block;"
  data-ad-client="xxxxx"
  data-ad-slot="xxxxxx"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

To create a responsive ad unit using the "Exact size per screen width" option in Advanced settings, follow this link: https://support.google.com/adsense/answer/3543893#adv

Answer №2

In the past, I encountered a similar issue in WP and resolved it by rearranging the order of the media queries. You might want to try placing the highest pixel value at the top and then descending from there.

** However, I managed to make it work by using max-width instead.

@media (max-width: 500px) {
    .adslot-desktop {
        width: 468px;
        height: 60px;
        display: inline-block;
    }
}

@media (max-width: 320px) {
    .adslot-desktop {
        width: 320px;
        height: 50px;
        display: inline-block;
    }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alignment of Bootstrap responsiveness shifted to the left rather than the center

My HTML Code: <div class="gridrow" id="eventsrow"> <div class="gridcard" id="eventcard" style="float:left;width:100%;height:100%;margin-bottom:0.5rem;background-color:white"> <div class="event container"> <div clas ...

htmlcsstwitter-bootstrap

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

javascriptcssreactjstypescriptmaterial-ui

Enhance your HTML5 video by incorporating strategically placed buttons (images) as an overlay

Recently, I embedded a video: <video preload muted autoplay loop id="sty"> <source src="content/1/sty.mp4" type="video/mp4"> </video> To make this video full-width, I made sure to set the CSS properti ...

htmlcsshtml5-video

smoothly hide the dropdown menu when a link is clicked with a transition effect

I am struggling with two bugs in my dropdown menu that I can't seem to fix. The navigation links on my homepage take users to different sections of the page instantly when clicked. However, the issue arises when the dropdown menu does not close after ...

javascripthtmlcss

Spread out a div across a container's width

Currently, I am struggling to modify my css and html in order to have a div expand horizontally into a scrollable div. However, all I seem to get is the content stacking once the width limit is reached. Take a look at this fiddle for reference. The absol ...

htmlcss

What is the best method for decreasing the space between ordered list elements?

Help with removing unwanted top margin space I have been experiencing an issue where I am getting extra space above the list items when using a ul before an ol. The result is that only the unwanted space appears above the circle and number 1. I attempted ...

htmlcss

Angular 5: Transforming and Concealing CSS Class Names

Can CSS selectors be renamed or obfuscated in an Angular CLI project? Many top websites like Google and Facebook use randomized CSS names for various reasons, such as preventing website scripting through targeting static class names. I would like to imple ...

cssangular

Using React.js to create table cells with varying background colors

For my React application, I am working with a table that utilizes semantic ui. My goal is to modify the bgcolor based on a condition. In most cases, examples demonstrate something like bgcolor={(condition)?'red':'blue'}. However, I requ ...

javascripthtmlreactjssemantic-ui

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

Calculate values dynamically when styling material-UI components

Utilizing the Material-UI style to define the class. Now, I aim to adjust the height based on the browser's width. Is there a way to dynamically calculate this within makeStyles() or implement a workaround? This snippet below represents what I am t ...

cssreactjsmaterial-ui

The fillOpacity and opacity properties appear to be malfunctioning

Note: While I understand that image masking can solve my issue, I prefer not to use it as it would require me to use my image as a background and could present accessibility challenges. I am specifically looking for solutions involving clip-path. Issue: T ...

htmlcssimagesvgstyling

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss

CSS font-face is not functioning as expected

I'm experiencing issues with importing a CSS font, and I'm puzzled as to why it's not working. The specific font in question is 'deadjim.ttf' and it is located within my main public_html directory. I have confirmed that the file p ...

htmlcssfontsfont-face

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

What methods can be used to defer the visibility of a block in HTML?

Is there a way to reveal a block of text (h4) after a delay once the page has finished loading? Would it be necessary to utilize setTimeout for this purpose? ...

javascripthtml

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

I'm in the midst of a project that involves using the electron framework. Within my project, I have an HTML file, a CSS file, and a Javascript file. The issue at hand is that when I hover over a button, the expected hand pointer icon fails to appear d ...

javascripthtmlcsselectronaddeventlistener