- This topic has 12 replies, 4 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
When I have placed ads below the entry title, then I am facing the problem of Cumulative Layout Shift.
Customer Support
Hi there,
From my understanding, ads often cause CLS issues and it’s not something the theme can control.
We could try to reserve the space for ads with CSS, but then users who use a browser app like AdBlock will see a big empty space.
please provide any css code for reserve the space for ads.
Take a look at David’ suggestion here:
https://generatepress.com/forums/topic/reserve-space-for-ads-in-header-or-post/#post-1855257I have pasted the code in css but how to paste html code and where. because i am using ad-inserter.
because i am using ad-inserter.
In that case, you would need to check with Ad Inserter’s support team.
no other suggestions?
Hello David, please tell me what to do. please provide any css code for reserve the space for ads.
Customer Support
Hi Anil,
With David’s approach, you’ll need to add your advertisement code through a Hook Element. Reference: https://docs.generatepress.com/article/hooks-element-overview/
Thanks Fernando, problem solved. but I want to show this ads only mobile version. please help.
Can you change the Hook Element code to this?:
<?php if(wp_is_mobile()) { ?> <div class="header-advert-wrap"> // Your Ad script goes here </div> <?php } ?>Make sure to add your ad script.
Make sure to check “Enable PHP” in the Hook Element settings as well.
After entering the code, the ad is not visible in the desktop but the desktop space is still being created in Core Vital. Because of which Largest Contentful Paint issue is coming.
Customer Support
Referring to my CSS here:
https://generatepress.com/forums/topic/reserve-space-for-ads-in-header-or-post/#post-1855257
You only need the second rule ie.
@media(max-width: 768px) { .header-advert-wrap { min-height: 200px; } }Adjust the
min-heightto suit your advert.
- You must be logged in to reply to this topic.
