Unwanted side spacing – Overflow

Hello @francuelsoares

Thank you for contacting us, The issue occurs in cases where tag is not closed properly or Theme CSS may be overwriting one another creating extra spacing.

It will be best to theme developer or a CSS expert get this issue fixed.

You can also try the following code snippet in Appearance->Customizer->CSS:

@media screen and (max-width: 769px){
   html[amp] #content-main, #sidebar-main {
     padding-right:10px;
  }
}

We hope this helps!

I am the theme developer. And as an advanced user, I can guarantee you that there are no incorrect closing tags.

Following your feedback on the CSS, I looked deeper until I decided to remove a rule that I overridden the padding of the .container element (Bootstrap 5).

This apparently fixed the issue, but it was in a test environment where the ads weren’t turned on, as I was also suspicious of them.

After turning on the AdSense ad at the top, I noticed that the margin on the side comes back again. If you delete it from the DOM manually, you’ll notice that the spacing on the side is gone.

Here’s a preview that the ad is positioned incorrectly. Can you show me a plausible reason for this to happen? This is a component generated by the AMP plugin that I have no control over.

Hello @francuelsoares

Can you please change the update code as follows,

<div>
<amp-ad width="100vw" height="320" type="adsense" data-ad-client="ca-pub-3070903828004804" data-ad-slot="5539976722" data-auto-format="rspv" data-full-width="" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:100vw;height:320px" i-amphtml-layout="fixed">
</amp-ad>
</div>

You will notice that I have removed the class wwp-block-ads mb-2x and also removed <div overflow=""></div>

Check result with modified code

These class are important class of the theme to adjust the layout of the site, I can’t help but use them.

And the tag “<div overflow …” is not generated by me, but by the output of the plugin. Even if removing it resolves the issue, I don’t see a clean way to tell the AMP plugin that I don’t want this tag.

@francuelsoares When I removed classes and the tag it appears right padding issue is fixed, Please try in AMP playground

Here is URL with modified changes https://codefile.io/f/LzoTFCy0MDOM1tjYgc86

Also, the removing class didn’t not affect AMP pages, Can you please share which plugin you are using to create add the Ad unit code?

I removed all the classes you mentioned including the div.overflow, still the problem remains. Take the test, please.

I’m using the theme in question to insert ads, as it already has complete functionality for this without the need to use plugins.

Here you can see the AdSense code configuration configured there. As you can see, this feature of the theme supports AMP without any problems. To do this, simply set up a second alternate code. This second code is inserted only when it is detected that the page in question is AMP. By analyzing the HTML code of the page, you can also verify that it is working correctly.

…

Your plugin is great! But this problem really now is bothering me a lot. Several other Wolf WP theme customers are experiencing the same thing.

I thank you for your help.

Hello @francuelsoares
We tried to debug this as best we could but it seems the issue is specific to your site, it may be possible that you are adding responsive ads in a container which may be causing the issue, as we have hit a dead end.

Please get in touch with AMP support (AMP web component framework support) as they can better guide you regarding the amp-ad component and its usage.

Sorry, we can’t be more of an assistance on this one!

@francuelsoares As we didn’t receive a response I’ll mark this as resolved. Feel free to open a?new support topic?if you require any further assistance.