Fix horizontal scrollbar (hugo-toha#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 <[email protected]>
khannmb · Jun 6, 2021 · 929a788 · 929a788
1 parent 65a429b
commit 929a788
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git 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
@@ -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
@@ -58,7 +58,7 @@
  padding-right: 0;
  }
  .skills-section .container {
- max-width: 100%;
+ max-width: 95%;
  }
 }