diff --git a/src/styles/components/_blog.scss b/src/styles/components/_blog.scss
index b1cb9d5be..2f7acd065 100644
--- a/src/styles/components/_blog.scss
+++ b/src/styles/components/_blog.scss
@@ -3,6 +3,14 @@
   -ifm-h2-font-size: 2em;
   -ifm-h3-font-size: 1.6em;
   -ifm-h4-font-size: 1.2em;
+  width: 100%;
+  overflow-x: hidden;
+  
+  @media (max-width: 996px) {
+    width: 100vw;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
 
   article {
     h2 {
@@ -17,6 +25,13 @@
   }
 
   main {
+    width: 100%;
+    overflow-x: hidden;
+    
+    @media (max-width: 996px) {
+      padding: 0;
+    }
+    
     article {
       align-items: flex-start;
       border: 2px solid var(--token-secondary-bg-c-alt);  
@@ -26,14 +41,26 @@
       font-size: 0.9em !important;
       margin: 0;
       margin-bottom: 1em !important;
+      width: 100%;
+      overflow-x: hidden;
+      box-sizing: border-box;
       //padding: em;
+      
+      @media (max-width: 996px) {
+        border-radius: 0;
+        padding: 0 0.5em;
+      }
 
       h1 {
         font-size: var(--ifm-h1-font-size) !important;
+        width: 100%;
+        word-wrap: break-word;
       }
 
       h2 {
         font-size: var(--ifm-h2-font-size) !important;
+        width: 100%;
+        word-wrap: break-word;
         > a {
           color: var(--ifm-font-color-base);
           text-decoration: none;
@@ -42,6 +69,12 @@
 
       .markdown {
         height: 100%;
+        width: 100%;
+        overflow-x: hidden;
+        
+        img, pre, code {
+          max-width: 100%;
+        }
       }
     }
   }
@@ -60,6 +93,11 @@
   footer {
     width: 100%;
     flex-wrap: nowrap;
+    
+    @media (max-width: 996px) {
+      flex-wrap: wrap;
+      padding: 0.5em;
+    }
 
     .col {
       //flex: auto;
@@ -70,6 +108,11 @@
       max-width: initial;
       text-wrap: nowrap;
       padding-right: 0;
+      
+      @media (max-width: 996px) {
+        text-wrap: wrap;
+        text-align: left;
+      }
 
       a {
         text-decoration: none;
diff --git a/src/theme/BlogLayout/styles.module.scss b/src/theme/BlogLayout/styles.module.scss
index c14f2314c..231c68424 100644
--- a/src/theme/BlogLayout/styles.module.scss
+++ b/src/theme/BlogLayout/styles.module.scss
@@ -2,14 +2,26 @@
   margin-left: 0 !important;
   margin-right: 0 !important;
   display: flex;
+  
+  @media (max-width: 996px) {
+    flex-direction: column;
+  }
 }
 
 .blogContainer {
   padding: 0;
+  
+  @media (max-width: 996px) {
+    width: 100%;
+  }
 }
 
 .blogPage {
   padding: 2em 1em;
+  
+  @media (max-width: 996px) {
+    padding: 1em 0.5em;
+  }
 }
 
 .updatesHeader {
@@ -25,6 +37,11 @@
   > *:last-child {
     grid-column: 1 / -1;
   }
+  
+  @media (max-width: 996px) {
+    padding: 0.5em;
+    grid-gap: 0.5em;
+  }
 }
 
 @media (min-width: 996px) {
@@ -42,6 +59,14 @@
 .article {
   padding: 1em;
   max-width: 1000px;
+  width: 100%;
+  overflow-x: hidden;
+  
+  @media (max-width: 996px) {
+    width: 100%;
+    max-width: 100%;
+    padding: 0.5em;
+  }
 } 
 
 .devFlag {