fix: ads display causing layout break in mobile view (#230)

vuejs · Feb 10, 2021 · 7ceaf34 · 7ceaf34
1 parent e58f52e
commit 7ceaf34
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -179,6 +179,7 @@ const pageClasses = computed(() => {
   #ads-container {
     /* Avoid layout shift */
     height: 105px;
+    margin: 1.75rem 0;
   }
 }
 

diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
@@ -22,7 +22,6 @@ onMounted(() => {
 
 <style scoped>
 .carbon-ads {
-  padding: 1.75rem 0 0;
   border-radius: 4px;
   margin: 0 auto;
   max-width: 280px;

diff --git a/src/client/theme-default/components/Page.vue b/src/client/theme-default/components/Page.vue
@@ -47,4 +47,11 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
 .content {
   padding-bottom: 1.5rem;
 }
+
+@media (max-width: 420px) {
+  .content {
+    /* fix carbon ads display */
+    clear: both;
+  }
+}
 </style>