modified responsive issue for extra-small device

gethugothemes · Feb 21, 2021 · ffaed8f · ffaed8f
1 parent 82d1486
commit ffaed8f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss
@@ -14,6 +14,10 @@
     text-align: center;
     justify-content: center;
 
+    @include mobile-xs {
+      padding: 5px;
+    }
+
     * {
       position: relative;
       z-index: 1;
@@ -37,10 +41,15 @@
     border-radius: 50%;
     border: 1px solid $white;
     margin: 0 auto 20px;
+
     @include mobile {
       zoom: .7;
     }
 
+    @include mobile-xs {
+      zoom: .5;
+    }
+
     span {
       display: block;
       text-transform: uppercase;
@@ -56,16 +65,24 @@
     font-size: 4rem;
     color: $white;
     margin-bottom: 20px;
+
     @include desktop-lg {
       font-size: 3rem;
     }
+
     @include desktop {
       font-size: 1.7rem;
     }
+
     @include mobile {
       font-size: 1.2rem;
     }
 
+    @include mobile-xs {
+      font-size: 1.1rem;
+      margin-bottom: 5px;
+    }
+
     a {
       color: inherit;
     }
@@ -87,50 +104,57 @@
   }
 
   .post-meta {
+    margin-bottom: 0;
 
     i {
       color: $white;
     }
 
     a {
       color: $white;
-      
-    @include mobile {
-      font-size: 12px;
-    }
+
+      @include mobile {
+        font-size: 12px;
+      }
     }
   }
 
   &-sm {
     .post-title {
       font-size: 1.7rem;
+
       @include mobile {
         font-size: 1.2rem;
       }
     }
   }
 }
 
-.author-img{
+.author-img {
   height: 100px;
   width: 100px;
   border-radius: 50%;
   object-fit: cover;
   transform: translateY(50px);
 }
 
-.facts{
+.facts {
   text-align: center;
-  h1,h2,h3{
+
+  h1,
+  h2,
+  h3 {
     display: inline-block;
     border-bottom: 1px solid $black;
     margin-bottom: 20px;
   }
-  li{
+
+  li {
     border-bottom: 1px solid $border-color;
     padding: 10px 0;
     margin: 0 !important;
-    &::before{
+
+    &::before {
       display: none;
     }
   }
@@ -405,4 +429,4 @@
   &-by {
     color: $primary-color;
   }
-}
+}
diff --git a/...eSite/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/...eSite/resources/_gen/assets/scss/scss/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -334,6 +334,9 @@ mark {
     flex-direction: column;
     text-align: center;
     justify-content: center; }
+    @media (max-width: 400px) {
+      .post-content {
+        padding: 5px; } }
     .post-content * {
       position: relative;
       z-index: 1; }
@@ -355,6 +358,9 @@ mark {
     @media (max-width: 575px) {
       .post-date {
         zoom: .7; } }
+    @media (max-width: 400px) {
+      .post-date {
+        zoom: .5; } }
     .post-date span {
       display: block;
       text-transform: uppercase; }
@@ -374,6 +380,10 @@ mark {
     @media (max-width: 575px) {
       .post-title {
         font-size: 1.2rem; } }
+    @media (max-width: 400px) {
+      .post-title {
+        font-size: 1.1rem;
+        margin-bottom: 5px; } }
     .post-title a {
       color: inherit; }
   .post-meta i {
@@ -382,13 +392,15 @@ mark {
     text-transform: uppercase; }
     .post-meta a:hover {
       color: #222; }
-  .post .post-meta i {
-    color: #fff; }
-  .post .post-meta a {
-    color: #fff; }
-    @media (max-width: 575px) {
-      .post .post-meta a {
-        font-size: 12px; } }
+  .post .post-meta {
+    margin-bottom: 0; }
+    .post .post-meta i {
+      color: #fff; }
+    .post .post-meta a {
+      color: #fff; }
+      @media (max-width: 575px) {
+        .post .post-meta a {
+          font-size: 12px; } }
   .post-sm .post-title {
     font-size: 1.7rem; }
     @media (max-width: 575px) {
@@ -403,7 +415,9 @@ mark {
 
 .facts {
   text-align: center; }
-  .facts h1, .facts h2, .facts h3 {
+  .facts h1,
+  .facts h2,
+  .facts h3 {
     display: inline-block;
     border-bottom: 1px solid #000;
     margin-bottom: 20px; }