Merge pull request #2888 from VaibhavArora19/responsive

[Fix] Responsiveness of first hero banner
layer5io · Jun 10, 2022 · f1c2c8f · f1c2c8f
2 parents ddd54bb + 28692f3
commit f1c2c8f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/sections/Home/Banner-1/banner1.style.js b/src/sections/Home/Banner-1/banner1.style.js
@@ -24,7 +24,7 @@ const Banner1SectionWrapper = styled.section`
     .section-title{
         text-align: center;
         h1 {
-            font-size: 60px;
+            font-size: 57px;
             line-height: 4.3rem;
             span {
                 font-weight: 700;
@@ -78,7 +78,7 @@ const Banner1SectionWrapper = styled.section`
             }
         }
         p {
-            font-size: 1.5rem;
+            font-size: 1.4rem;
         }
     }
     @media only screen and (max-width: 992px) {
@@ -89,11 +89,11 @@ const Banner1SectionWrapper = styled.section`
                 line-height: 2.7rem;
             }
             h2 {
-                font-size: 2rem;
+                font-size: 1.87rem;
             }
         }
         p {
-            font-size: 1.5rem;
+            font-size: 1.4rem;
         }
     }
     @media only screen and (max-width: 912px) {
@@ -104,17 +104,20 @@ const Banner1SectionWrapper = styled.section`
         
         .section-title {
             h1 {
-                font-size: 2.5rem;
+                font-size: 2.45rem;
                 line-height: 2.7rem;
                 margin: 0 0 1rem 0;
             }
             h2 {
-                font-size: 2rem;
+                font-size: 1.6rem;
+                margin: 0 auto;
+                width: 90%;
             }
         }
         p { 
             font-size: 1.25rem;
-            margin: 2rem 0rem;
+            margin: 2rem auto;
+            width: 80%;
         }
         .banner-btn {
             min-width: 140px;
@@ -131,14 +134,16 @@ const Banner1SectionWrapper = styled.section`
         .section-title { 
             h1 { 
                 margin: 0rem;
-                font-size: 2rem;
+                font-size: 1.82rem;
             }
             h2 {
-                font-size: 1.5rem;
+                font-size: 1.15rem;
+                width: 80%;
             }
         }
         p {
-            font-size: 1.2rem;
+            font-size: 1.1rem;
+            width:60%;
         }
         .vintage-box{
              &:before{
@@ -162,11 +167,12 @@ const Banner1SectionWrapper = styled.section`
                 font-size: 1.8rem;
             }
             h2 {
-                font-size: 1.3rem;
+                font-size: 1rem;
+                width: 80%;
             }
         }
         p {
-            margin: 1rem 0;
+            margin: 1rem auto;
             font-size: 1.1rem;
         }
         .vintage-box{
@@ -188,7 +194,8 @@ const Banner1SectionWrapper = styled.section`
                 /* margin: 0 0 30px 0; */
             }
             h2 {
-                font-size: 1.3rem;
+                font-size: 1rem;
+                width:100%;
             }
         }
         p {

diff --git a/src/sections/Home/Banner-2/banner2.style.js b/src/sections/Home/Banner-2/banner2.style.js
@@ -114,6 +114,12 @@ const Banner2SectionWrapper = styled.section`
              }
          }
      }
+     @media only screen and (max-width: 576px) {
+        p {
+            padding-right: 9rem;
+        }
+        
+     }
      @media only screen and (max-width: 480px) {
         padding: 2rem 0;
         background-position: bottom 230px right 20px, bottom 180px right;
@@ -123,6 +129,7 @@ const Banner2SectionWrapper = styled.section`
             h1 {
                 font-size: 35px;
                 line-height: 50px;
+                width: 75%;
             }
         }
          .vintage-box{
@@ -136,6 +143,11 @@ const Banner2SectionWrapper = styled.section`
 			{
 				margin: 0 0.5rem 1rem;
 			}
+            .section-title{
+                h1 {
+                    width:85%;
+                }
+            }
 		 }
      @media only screen and (max-width: 380px) {
         background-position: bottom 200px right 20px, bottom 150px right;
@@ -165,7 +177,7 @@ const Banner2SectionWrapper = styled.section`
                 line-height: 35px;
             }
         }
-     }
+    }
      
 `;