Archived topic
How to set fixed hero height to reserve space for ads?
5 replies · Started by Przemek on April 15, 2021
How to set in css fixed height of the hero? I wanted to put adsense ads code it in, but there is a problem, because elastic ads load with latency and it causes Cumulative Layout Shift error. Hot to set free place, i.e. 100px height to make space for ad, which will load miliseconds later?
Hov to reserve space for specific ad size in hero?
Hi there,
Can you link us to the page in question to check what kind of Hero section you're using?
You can add the details on the private information text field. Let us know.
Hi Elvin
I solved it temporarily by setting ad size in plugin for ad placements, but I wanted to make it with the hero settings - I want to put horizontal ad before menu (i.e. 750 * 100). I tried to make an element hero, but setting paddings does not help. I tried to use own HTML widget in the header, but the problem is still present - no possibility to set fixed height of this place.
Hi there,
wrap your Ad script in a
<div class="hero-advert">
<!-- your AD script goes in place of this -->
</div>Then you can use some CSS:
.hero-advert {
min-height: 280px;
}
/* optional size for smaller screens *.
@media(max-width: 768px) {
.hero-advert {
min-height: 150px;
}
}
Great! Thank you very much.
You're welcome
