Googls ads style problem on home-cover

[Jobsti]

Hello,

if I add a new Google responsive ad on the first two fields (startpage "bevor/after" and "home_after_cta")

<div id="home-cover" data-content="follow-scroll-opacity"> will be changed to
<div id="home-cover" data-content="follow-scroll-opacity" style="height: auto !important; min-height: 0px !important;">

And all the content is moved above the top.
If I insert an other AD with a fixed width/height, there is no problem.
I think the ad has to be already activated/loaded, the problem exists, if the ad is still empty.

The problem is, I think, the responsive ads have no height attribute intheir style-code.

How to fix/block this insertion of style attributes on div id="home-cover?

 

[Jobsti]

New info:

if the ad has style "display:inline-block" there is no problem.
Responsive ads have "display:block", in this case some divs will get the style attributes from above

 

[JakeSully]

When adding ads use banner setting in dashboard area, Do not manually add code into template files.

Banner area in dashboard is made just for you to be able to add google ads, own banners or w.e banners you like there and it will place them on correct areas as you want them to be.

 

[Jobsti]

Hi, thanks for your reply.
Dashboard/Ads is exactly what I've done.

Because my installation is german, I wrote the div classes instead of the dashboard-fields
and my pictures are showing the problem with opened code.

 

[JakeSully]

Hi, thanks for your reply.
Dashboard/Ads is exactly what I've done.

Because my installation is german, I wrote the div classes instead of the dashboard-fields
and my pictures are showing the problem with opened code.

what is exact code you putted in dashboard ---> settings ---> Banners?

 

[Jobsti]

The Codes from Google directly.

A responsive ad code:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AF_2021_Bildansicht-Footer_Responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-3238394349379832"
     data-ad-slot="1707266869"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

A fixed res ad code:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AF_2021_Start-Oben_960x90 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:960px;height:90px"
     data-ad-client="ca-pub-3238394349379832"
     data-ad-slot="6458204129"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

You see the difference, display:block and display:inline-block.
I saw on other Sites, there is no problem, if you use no Slideshow,
because the the body.landingpage uses

top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

to display the content in the middle of the screen, so the
ad-code from "display:block" will shift it to the top,
because the ad-style ("height: auto !important; min-height: 0px !important") is transfered to all other DIV

 

[Jobsti]

Sou, the code comes from Google itself, the responsive AD is injecting the Code, if it thinks the content is scrollable.

But I have 2 Solutions:

1.) Delete from the AD-Code the line: data-ad-format="auto" (Doesn't works good in .phone view)
2.) or insert the Code into a DIV with the following " style="position: relative; width: 100%; max-width: 100%;" "
and add to the line "Style=" of the original Ad-Code "position: absolute; width: inherit; max-width: inherit;"

 

[Rodolfo]

Ad slots don't include positioning at all. It is intended just as a placeholder, you must add positioning and display properties manually.

If you need to heavy modify the homepage you could use a theme override on index.php view. Documented here: https://v3-docs.chevereto.com/features/customization/theme.html#theme-overrides