[Resolved] How to place ad in container to avoid CLS issue in mobile view

[surendra1506]

Hi team,

I had placed google adsense auto ad on mobile view just below primary navigation causing CLS issue on my site classmate4u.com.

Please help me how to reserve space for ad or a container below primary menu location in mobile view to remove layout shift, so that ad come inside that.

Thanks again

[Ying]

Hi there,

I can see it has the hide-on-desktop class, would you be able to add more classes? For example, mobile-ads.

Let me know!

[surendra1506]

yes sure

[Fernando]

Hi Surendra,

Try adding mobile-ads to the class list of the ad, then add this CSS in Additional CSS:

.mobile-ads{
    min-height: 325px;
}

[surendra1506]

Hi Fernando,

Please may I know how to use mobile-ads to the class list of ad.

I am confused how to use it with hide on desktop.

Need your guidence on implementation.

Thanks in advance

[Fernando]

How are you inserting the ads currently?

[surendra1506]

I am using generatepress element hook to place add.

I can implement ads just need guidance on where to place mobile-ads

in this.

[Fernando]

I believe you already have a div. You can add it like this for instance:

<div class="hide-on-desktop mobile-ads">

//INSERT AD CODE HERE//

</div>

[surendra1506]

Thanks, Fernando I had achieved the desired outcome.

The last request is that currently, I am showing one ad on mobile and desktop below the title of a blog post.

I want it to appear below the first paragraph of every blog post.

But I am not sure which position to choose for the hook.

I am currently using position generate after entry title.

[Fernando]

You can try this code by Elvin: https://generatepress.com/forums/topic/element-after-first-paragraph/#post-1937353

[Author]

Posts