UX: introduce min-height for responsive ads (#170)
This commit is contained in:
parent
d3005f26af
commit
58205cc9ac
|
@ -2,7 +2,11 @@
|
||||||
<div class="google-adsense-label"><h2>{{i18n
|
<div class="google-adsense-label"><h2>{{i18n
|
||||||
"adplugin.advertisement_label"
|
"adplugin.advertisement_label"
|
||||||
}}</h2></div>
|
}}</h2></div>
|
||||||
<div class="google-adsense-content" style={{adWrapperStyle}}>
|
<div
|
||||||
|
class="google-adsense-content"
|
||||||
|
id={{if isResponsive "google-adsense__responsive"}}
|
||||||
|
style={{adWrapperStyle}}
|
||||||
|
>
|
||||||
<ins
|
<ins
|
||||||
class="adsbygoogle"
|
class="adsbygoogle"
|
||||||
style={{adInsStyle}}
|
style={{adInsStyle}}
|
||||||
|
|
|
@ -18,6 +18,12 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#google-adsense__responsive {
|
||||||
|
// Google strips styles added to parent wrapper classes, so we use this ID
|
||||||
|
// this sets a minimum height to reduce cumulative layout shift
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
.google-adsense .google-adsense-label {
|
.google-adsense .google-adsense-label {
|
||||||
width: 728px;
|
width: 728px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
Loading…
Reference in New Issue