From 7ceaf344d20f8a51c0452eed264e07b47d104043 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva@users.noreply.github.com>
Date: Wed, 10 Feb 2021 10:03:48 +0100
Subject: [PATCH] fix: ads display causing layout break in mobile view (#230)

---
 src/client/theme-default/Layout.vue               | 1 +
 src/client/theme-default/components/CarbonAds.vue | 1 -
 src/client/theme-default/components/Page.vue      | 7 +++++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 43a0b89f..ed7d02fc 100644
--- 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
index b6be7c25..719b43be 100644
--- 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
index 1cce5e5d..f4065724 100644
--- 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>