How to configure amp-auto-ad to use width 100% instead of 100vw

Question

I use amp-auto-ad on my website (for example on page https://www.w3docs.com/learn-css/css-usage.html). The auto ad damage the layout(please have a look at the screenshot). When I check the source I see that the ad width is 100vw which bracks the layout. My question is how to force amp-auto-ad to have width 100% instead of 100vw?

I checked the official documentation and it is not possible to define the layout for these ads. Also, it says to create a configuration file ad-network.config.js to configure the placement, but it simply does not work.

Answer 1

I had the exact same issue.

The problem here seems to be that with AMP, if you are using a relative value, it wants to get 100% of the available area. So if you're using VW or View Width as your relative value, it wants the 100% value there. SO you end up with (view width) + (padding + offset) = (total width on screen) which, to your point, breaks the table.

I found that swapping from VW to EM fixed the issue.

Use this instead:

<amp-ad width="100em" height="320"
    type="adsense"
    data-ad-client="[YOUR AD ID]"
    data-ad-slot="[YOUR ELEMENT ID]"
    data-auto-format="rspv"
    data-full-width="">
    <div overflow=""></div>
    </amp-ad>

This will provide a value for the width relative to the container element instead of the wiewport width.

See additional available units here:

https://www.w3schools.com/cssref/css_units.asp