How to place ad in container to avoid CLS issue in mobile view

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!

yes sure

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;
}

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

How are you inserting the ads currently?

I am using generatepress element hook to place add.

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

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>

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.

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