diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue index 82ee97c321e5..d45a2fddbf28 100644 --- a/src/client/theme-default/Layout.vue +++ b/src/client/theme-default/Layout.vue @@ -34,12 +34,16 @@ @@ -75,8 +79,9 @@ import NavBar from './components/NavBar.vue' import Home from './components/Home.vue' import SideBar from './components/SideBar.vue' import Page from './components/Page.vue' -// could be async but that would cause layout shifts -import CarbonAds from './components/CarbonAds.vue' +const CarbonAds = defineAsyncComponent( + () => import('./components/CarbonAds.vue') +) const BuySellAds = defineAsyncComponent( () => import('./components/BuySellAds.vue') ) @@ -145,3 +150,34 @@ const pageClasses = computed(() => { ] }) + + diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue index 94814564c8e2..d841330ddc3b 100644 --- a/src/client/theme-default/components/CarbonAds.vue +++ b/src/client/theme-default/components/CarbonAds.vue @@ -38,30 +38,17 @@ onMounted(() => { @media (min-width: 420px) { .carbon-ads { - position: relative; - right: -8px; z-index: 1; float: right; margin: -8px -8px 24px 24px; padding: 8px; width: 146px; - max-width: 100%; - } -} - -@media (max-width: 420px) { - .carbon-ads { - /* Avoid layout shift */ - height: 105px; } } @media (min-width: 1400px) { .carbon-ads { - position: fixed; - top: auto; right: 8px; - bottom: 8px; float: none; margin: 0; }