Fix horizontal scrollbar (#347)

* Fixed scrollbar problems related to about section.

* Fixed scrollbar problems related to skill section.

* Making h1 fonts a little bit smaller on small devices.

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>

3 files changed, 35 insertions, 1 deletions

diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css
index e028f3f..467bd4e 100644
--- a/static/css/layouts/main.css
+++ b/static/css/layouts/main.css
@@ -432,16 +432,29 @@ mark {
   code {
     padding: 0px;
   }
+
+  h1 {
+    font-size: 2.2rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
 @media only screen and (max-width: 375px) {
+  h1 {
+    font-size: 2rem;
+  }
 }
 
 /* Galaxy S5, Moto G4 */
 @media only screen and (max-width: 360px) {
+  h1 {
+    font-size: 1.8rem;
+  }
 }
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  h1 {
+    font-size: 1.5rem;
+  }
 }
diff --git a/static/css/sections/about.css b/static/css/sections/about.css
index 4f7b1e5..71d4b17 100644
--- a/static/css/sections/about.css
+++ b/static/css/sections/about.css
@@ -496,11 +496,24 @@
   .about-section.container {
     max-width: 100%;
   }
+  
+  .circular-progress {
+    width: 135px;
+    height: 135px;
+  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
+  .circular-progress {
+    width: 150px;
+    height: 150px;
+  }
+
+  .circular-progress .circular-progress-value {
+    font-size: 1rem;
+  }
 }
 
 /* iPhoneX, iPhone 6,7,8 */
@@ -513,4 +526,12 @@
 
 /* iPhone 5 or before */
 @media only screen and (max-width: 320px) {
+  .col-6 {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  .social-link {
+    flex-wrap: wrap;
+  }
 }
diff --git a/static/css/sections/skills.css b/static/css/sections/skills.css
index 211da14..ea692ad 100644
--- a/static/css/sections/skills.css
+++ b/static/css/sections/skills.css
@@ -58,7 +58,7 @@
     padding-right: 0;
   }
   .skills-section .container {
-    max-width: 100%;
+    max-width: 95%;
   }
 }