Support » Plugin: Advanced Ads – Ad Manager & AdSense » CLS Issue: CSS Being Overridden

  • Resolved muhammedswalihct

    (@muhammedswalihct)


    I am assuming that you are already aware of the Core Web Vitals which is going to be in effect from this month.

    So, while optimizing my ads to NOT jump to avoid the CLS (Cumulative Layout Shift) issue, I was setting the “height” using the CSS. But it seems like something is replacing the value when the ads are loaded. Even when I use the “!important” after the CSS height, it still gets replaced. The “min-height” is also not working.

    Height and Min-height values are being replaced with “height: auto !important” and “min-height: auto !important” with the inline CSS styles after the page load.

    Note: The “!important” is only being added in the mobile version. On desktop, the inline styles can be overridden using CSS because the “!important” is not being added.

    So, I want to know if it is done by this plugin. And if so, how can I prevent it and set CSS height for the ad container which will not be replaced.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support schmidt25

    (@schmidt25)

    Hi muhammedswalihct,

    Thanks for reaching out.

    We are aware of the web vitals and the CLS problem with ads. We will implement an easier way to handle this with Advanced Ads with the next major update.

    Note: The “!important” is only being added in the mobile version. On desktop, the inline styles can be overridden using CSS because the “!important” is not being added.

    Advanced Ads does not do something like this. I would expect your theme as a culprit for this issue.

    In this post about Cumulative Layout Shift (CLS) and Ads, we collect all known issues and tips you should know if handling ads on a website using Advanced Ads.

    Google postponed the rollout of the web vitals as a ranking factor and you have some weeks extra time to fix these issues.

    Best regards,
    Joachim

    Thread Starter muhammedswalihct

    (@muhammedswalihct)

    Hi @schmidt25 , Thanks for the reply…

    I just noticed that this also happens on the Desktop… When we set a certain height where the displayed ad correctly fits, everything is fine. But when a differently sized ad is displayed, the container is being sized to fit that ad. The CSS rule is not working no matter what I do.

    Also, I am pretty sure that this isn’t a theme issue because I have been using Genesis Framework for years now and they doesn’t do anything related to ads at all and this is a new issue.

    The only suspects as of now are either the AdSense script itself or the Ad plugin. As the rules are added to the ad container itself, I still suspect the plugin does this. The plugin even has the Reserve width and height value options that can be set and will change the values in the same container. So, can you take a second look at it, please?

    Plugin Support schmidt25

    (@schmidt25)

    Hi muhammedswalihct,

    Thanks for your reply.

    So, can you take a second look at it, please?

    A link to your website and a clear description of the placement where this issue appears would be helpful.

    Best regards,
    Joachim

    Plugin Support schmidt25

    (@schmidt25)

    Hi @muhammedswalihct,

    Can you please provide a link to your website to see this problem in my browser or did you already resolved it?

    Best regards,
    Joachim

    Thread Starter muhammedswalihct

    (@muhammedswalihct)

    Hi @schmidt25 … Sorry for the late reply. Actually, it does seem like happening randomly. I am investigating more about the issue now. The height is only being replaced once the ad loads and initially, during the page load, the height is not replaced. So maybe AdSense script does this (But I am not sure though).

    I will get back to you if I find any more details about this issue. Can’t confirm whether this is causing the CLS or other elements on the page.

    Plugin Support henningaa

    (@henningaa)

    Hi @muhammedswalihct,

    Were you able to track down the issue?

    Please let me know if you still need help or if it’s ok to close the topic.

    Best regards,
    Henning

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CLS Issue: CSS Being Overridden’ is closed to new replies.