Merge pull request #17 from rignitc/relv-sizing

Mummanajagadeesh · web-flow · commit d09680d79e73 · 2026-06-26T14:30:53.000+05:30
feat: relative sizing of section on hero page
diff --git a/src/styles/main_about.css b/src/styles/main_about.css
@@ -38,10 +38,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  min-height: 100vh;
+  min-height: 100dvh;
   gap: 50px;
   flex-wrap: wrap;
-  border-top: 2px solid #ccc;
 }
 
 #about .about-text,
diff --git a/src/styles/main_body.css b/src/styles/main_body.css
@@ -38,15 +38,20 @@ body {
 
 /* HERO (first section) */
 .hero {
-  margin-top: 120px;
+  min-height: 100dvh;
+  padding-top: 120px;
   /* leave room for navbar */
   display: flex;
   justify-content: space-around;
   align-items: center;
   text-align: left;
-  padding: 2rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2rem;
   gap: 3rem;
-  /* border-bottom: 2px solid #ccc; divider for first section */
+  border-bottom: 2px solid #ccc; /* divider for first section */
+  box-sizing: border-box;
+  width: 100%;
 }
 
 #slideshow {
@@ -67,7 +72,8 @@ body {
 
 /* Section styling + dividers */
 section:not(#footer-new) {
-  min-height: 100vh;
+  min-height: 100dvh;
+  scroll-margin-top: 120px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -77,6 +83,8 @@ section:not(#footer-new) {
   color: #ffffff;
   border-bottom: 2px solid #ccc;
   /* divider for all sections */
+  box-sizing: border-box;
+  width: 100%;
 }
 
 /* Explicit divider for #about too (redundant but ensures consistency) */
@@ -91,9 +99,12 @@ section:not(#footer-new) {
     justify-content: center;
     text-align: center;
     gap: 2rem;
-    margin-top: 80px;
+    padding-top: 80px;
     /* reduced for navbar */
-    padding: 1.5rem 1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1.5rem;
+    min-height: 100dvh;
   }
 
   /* Slideshow fixed box */
@@ -109,9 +120,11 @@ section:not(#footer-new) {
   }
 
   /* Sections smaller */
-  section {
+  section:not(#footer-new) {
     font-size: 1.8rem;
     padding: 2rem 1rem;
+    min-height: 100dvh;
+    scroll-margin-top: 80px;
   }
 }
 
diff --git a/src/styles/main_projects.css b/src/styles/main_projects.css
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   gap: 20px;
-  min-height: 100vh;
+  min-height: 100dvh;
   width: 100%;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`flex-direction: column;`
`39`	`39`	`align-items: center;`
`40`	`40`	`gap: 20px;`
`41`		`- min-height: 100vh;`
	`41`	`+ min-height: 100dvh;`
`42`	`42`	`width: 100%;`
`43`	`43`	`}`
`44`	`44`