Merge pull request #28 from mihaiconstantin/fix/media-query-mobile

Update breakpoints for mobile views
mihaiconstantin · Aug 31, 2022 · 3711ab2 · 3711ab2
2 parents 1a86970 + 217a6cf
commit 3711ab2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/docs/.vuepress/styles/general.scss b/docs/.vuepress/styles/general.scss
@@ -71,7 +71,8 @@ table {
         }
 
         // Adjustments for screens smaller than 419px.
-        @media only screen and (max-width: 419px) {
+        // Additional break points are used based on the content.
+        @media only screen and (max-width: 419px), (max-width: 428px) {
             font-size: 1rem;
         }
     }

diff --git a/docs/.vuepress/styles/pages/home.scss b/docs/.vuepress/styles/pages/home.scss
@@ -42,10 +42,10 @@
 
     .heart {
         display: inline-block;
+        position: relative;
         color: rgb(196, 27, 27);
         font-size: 1.3rem;
         cursor: default;
-        filter: grayscale(20%);
         transition: all .5s;
 
         &:before {
@@ -56,7 +56,7 @@
             position: absolute;
             left: 0;
             right: 0;
-            bottom: 31%;
+            bottom: 32%;
             text-align: center;
             transition: all .5s;
         }

diff --git a/docs/.vuepress/styles/pages/tutorial.scss b/docs/.vuepress/styles/pages/tutorial.scss
@@ -30,7 +30,8 @@
         }
 
         // Adjustments for screens smaller than 419px.
-        @media only screen and (max-width: 419px) {
+        // Additional break points are used based on the content.
+        @media only screen and (max-width: 419px), (max-width: 428px) {
             img {
                 width: 80%;
             }
@@ -40,7 +41,8 @@
     .table-arguments {
         table {
             // Adjustments for screens smaller than 419px.
-            @media only screen and (max-width: 419px) {
+            // Additional break points are used based on the content.
+            @media only screen and (max-width: 419px), (max-width: 428px), (max-width: 517px) {
                 font-size: 0.8rem;
 
                 td, th {