Strange problem with an ad in element on archive page! (Footer in the middle)

Hi there,

i believe the issue is arising from the inline-styles that are being injected into the Theme Elements. See here:

https://www.screencast.com/t/6Wbj741ElEY

Many of the theme elements have had the height: auto !important; style added to them.
Including the generate-columns-container whose height cannot be auto.

You need to find and eliminate which plugin or script is adding those inline styles.

Hi David,

this is really strange but thanks for looking into it.

I have the Health Check & Troubleshooting plugin installed and have disabled everything except Generatepress and Generateblocks in troubleshooting mode.
But the inline styles are still inserted. I thought maybe it was Toolset but the archive pages are not touched by Toolset and when Toolset is disabled it doesn't work either.

This also only happens in archive pages when I have inserted the element with the Adsense code.
On all other archive pages without this element nothing of these inline styles is to be seen far and wide.

In my local dev-site there is also nothing to see. But there I can't test any Adsense code either. But elements with image dummies work fine.

Maybe it's not so bad, because the website was just accepted by Mediavine and soon the advertising will be changed.

I'm just a little unsettled since I just switched from Astra yesterday and didn't have a problem before.
However, Astra has other little problems and that's why I really wanted to change the theme before switching to Mediavine to have a solid base.

I guess I'll have to keep thinking.

I get the impression the adsense code is adding those inline styles.

What if you disable the Masonry option in Customizer > Layout > Blog ? Is that an option ?

Thanks David!

It really seems to be. I found a way to test it locally.

When I disable the masonry layout everything seems to be ok.

So I would disable masonry for now.

Do you see any way that this problem can be addressed in the future?

The issue comes from that inline style of height: auto being added to the columns container.
Masonry runs scripts to calculate the height and position of each position. And part of that includes setting the height of the columns container. And that inline style is breaking it.

Are you inserting adverts inside the Columns Container? ie. in between posts ?

Currently, no ads are inserted between them in the archive. The adsense auto ads are also currently off as there have been issues as well.

I have now disabled masonry and currently it works with a placed element. However, I've never had problems like this before and I'm a little unsure what else is coming up.

You need to find what is adding the height: auto !important; to the themes HTML. It can cause these kinds of problems.
Could you create a staging site and then you can remove plugins and scripts to see which one is adding that inline style.

It is clear. No plugin is to blame - it's the Adsense script.
The Adsense script inserts these inline styles. I also see this on other sites of mine and others, but there it does not have a negative effect.

There are also some others on the net that have bigger problems with it.

I think Google has been doing this for a while, but this is the first time I've encountered this problem. Not nice what Google does there.

I found out, that with a responsive display ad this paramenter is significantly involved: data-ad-format="auto"
If this is removed, then the inline styles are not inserted. Probably there are then other problems with the ad display. Maybe this can be adjusted with a detailed adjustment of the ad code. But I have not tested that yet.

Other people counter this with MutationObserver. But I have never done that.

Anyway, I now know where the error comes from.

Thanks a lot :-)

Aha - ok so i found some posts on the mutationObserver

<script>
    // based on code found at:
    // https://stackoverflow.com/questions/55695667/adsense-injecting-style-tag-into-my-page-in-chrome
    var flex = document.getElementsByClassName('generate-columns-container')[0];
    const observer = new MutationObserver(function (mutations, observer) {
        flex.style.height = "";
    });
    observer.observe(flex, {
        attributes: true,
        attributeFilter: ['style']
    });
</script>

This line: var flex = document.getElementsByClassName('generate-columns-container')[0]; i added our generate-columns-container class so its being observed.

You can use a Hook Element to add the <script> into either the wp_head or the wp_footer.

For reference the script came from this post:

https://weblog.west-wind.com/posts/2020/May/25/Fixing-Adsense-Injecting-height-auto-important-into-scrolled-Containers

Nice find @David!

But I get this error message in Firefox Console:
Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object.

Chrome displays this:
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Is that the case if you add it the wp_footer hook?
As that error simply means that the generate-columns-container element wasn't found when the script fired.

OK, wp_footer hook works - the error is gone - height: auto !important is also gone but now the height is missing completely.
Now looks like this:
<div class="generate-columns-container masonry-container" style="position: relative;">

Yeah - thats an issue, i tried refactoring the code to unmount the mutationObserver after it removes the height property so it can leave GPs Masonry script to do its thing, but the timing is out.

Do you have this set up on an archive with the masonry setting on?

Yes for an archive with masonry because without masonry everything is ok so far.