fix: avoid layout shift due to ads

pull/176/head
Eduardo San Martin Morote 5 years ago
parent 9d64538d03
commit 618d97fb9e

@ -37,7 +37,7 @@
<template #top>
<slot name="page-top-ads">
<CarbonAds
v-if="theme.carbonAds"
v-if="theme.carbonAds && theme.carbonAds.carbon"
:key="'carbon' + page.relativePath"
:code="theme.carbonAds.carbon"
:placement="theme.carbonAds.placement"

@ -26,14 +26,14 @@ onMounted(() => {
border-radius: 4px;
margin: 0 auto;
max-width: 280px;
font-size: .75rem;
background-color: rgba(255, 255, 255, .8);
font-size: 0.75rem;
background-color: rgba(255, 255, 255, 0.8);
}
.carbon-ads::after {
clear: both;
display: block;
content: "";
content: '';
}
@media (min-width: 420px) {
@ -49,6 +49,13 @@ onMounted(() => {
}
}
@media (max-width: 420px) {
.carbon-ads {
/* Avoid layout shift */
height: 105px;
}
}
@media (min-width: 1400px) {
.carbon-ads {
position: fixed;
@ -62,7 +69,7 @@ onMounted(() => {
.carbon-ads ::v-deep(.carbon-img) {
float: left;
margin-right: .75rem;
margin-right: 0.75rem;
max-width: 100px;
border: 1px solid var(--c-divider);
}

Loading…
Cancel
Save