From 929a78837ae2ded97714472980557f18ffef2acd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antonio=20Hern=C3=A1ndez?= <granviamurcia2@gmail.com>
Date: Sun, 6 Jun 2021 11:56:06 +0200
Subject: [PATCH] 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>
---
 static/css/layouts/main.css    | 13 +++++++++++++
 static/css/sections/about.css  | 21 +++++++++++++++++++++
 static/css/sections/skills.css |  2 +-
 3 files changed, 35 insertions(+), 1 deletion(-)

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%;
   }
 }