Merge pull request #4472 from Shivam-AfA/button-fix

fixed button alignment
layer5io · Jul 2, 2023 · 456e5b3 · 456e5b3
2 parents 3941e16 + d428403
commit 456e5b3
Showing 1 changed file with 33 additions and 13 deletions.
diff --git a/src/sections/Home/Banner-4/banner4.style.js b/src/sections/Home/Banner-4/banner4.style.js
@@ -42,19 +42,39 @@ const Banner1SectionWrapper = styled.section`
     }
     .vintage-box {
         margin: auto;
+        display: flex;
+        flex-direction: row;
+        text-align: center;
+
+        @media only screen and (max-width:975px) {
+            flex-direction: column;
+        }
+
+        @media only screen and (max-width:767px) {
+            flex-direction: row;
+            margin-top: 5%;
+        }
     }
     .banner-btn {
         margin: 0rem .5rem 0 .5rem;
     }
     .banner-btn.one {
         margin: 0rem .5rem 0 .5rem;
-        background: ${props => props.theme.highlightColor}; 
+        background: ${props => props.theme.highlightColor};
+
+        @media only screen and (max-width:975px) {
+            margin: 8% 0%;
+        }
+
+        @media only screen and (max-width:767px) {
+            margin: 0rem .5rem 0 .5rem;
+        }
 
         &:hover {
-             background: ${props => props.theme.highlightLightColor}; 
+             background: ${props => props.theme.highlightLightColor};
         }
         &:active{
-            background: ${props => props.theme.saffronColor}; 
+            background: ${props => props.theme.saffronColor};
         }
     }
     .banner-btn.two{
@@ -66,7 +86,7 @@ const Banner1SectionWrapper = styled.section`
         }
     }
     @media only screen and (max-width: 1200px) {
-        .section-title { 
+        .section-title {
             h1 {
                 font-size: 3rem;
                 line-height: 3.5rem;
@@ -81,7 +101,7 @@ const Banner1SectionWrapper = styled.section`
         }
     }
     @media only screen and (max-width: 992px) {
-        .section-title { 
+        .section-title {
             h1 {
                 font-size: 2.7rem;
                 line-height: 2.7rem;
@@ -110,7 +130,7 @@ const Banner1SectionWrapper = styled.section`
                 width: 90%;
             }
         }
-        p { 
+        p {
             font-size: 1.25rem;
             margin: 2rem auto;
             width: 80%;
@@ -120,7 +140,7 @@ const Banner1SectionWrapper = styled.section`
         }
         .banner-btn+.banner-btn{
             margin-left: 15px;
-        } 
+        }
     }
     @media only screen and (max-width: 767px) {
         .section-title-wrapper {
@@ -129,8 +149,8 @@ const Banner1SectionWrapper = styled.section`
         .video-col{
             display: none;
         }
-        .section-title { 
-            h1 { 
+        .section-title {
+            h1 {
                 margin: 0rem;
                 font-size: 1.82rem;
             }
@@ -162,8 +182,8 @@ const Banner1SectionWrapper = styled.section`
 	}
     @media only screen and (max-width: 430px) {
         padding: 1rem 0;
-        .section-title { 
-            h1 { 
+        .section-title {
+            h1 {
                 margin: 0rem;
                 font-size: 1.8rem;
             }
@@ -205,7 +225,7 @@ const Banner1SectionWrapper = styled.section`
         .banner-btn{
             font-size: 14px;
             min-width: 127px;
-            padding: 14px 12px; 
+            padding: 14px 12px;
         }
      }
      @media only screen and (max-width: 330px) {
@@ -216,7 +236,7 @@ const Banner1SectionWrapper = styled.section`
             }
         }
      }
-     
+
 `;
 
 export default Banner1SectionWrapper;