feat(content): better responsiveness

1 files changed, 15 insertions, 0 deletions

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 0ae776d..c4ea8d8 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -133,6 +133,18 @@ section[data-scroll] .content {
   max-width: 800px;
   margin: auto;
   padding: 2rem;
+  @media only screen and (max-width: $bp-mid) {
+    left: 10%;
+    right: 10%;
+    transform: translateY(-50%);
+  }
+  @media only screen and (max-width: $bp-small) {
+    width: 100%;
+    box-sizing: border-box;
+    left: 0;
+    right: 0;
+    transform: translate(0, 0);
+  }
 
   & p {
     margin-bottom: 0;
@@ -198,6 +210,9 @@ section[data-scroll] .content {
     @media only screen and (max-width: $bp-large) {
       grid-template-columns: 1fr;
     }
+    @media only screen and (max-width: $bp-tiny) {
+      padding: 2rem;
+    }
   }
   & .text {
     display: flex;