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

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

Loading…
Cancel
Save