Merge pull request #6828 from Radha2786/fix/6803-Duration&CurrencySwitcher

fixed alignment of duration and currency switcher

Author: Namanv0509

src/sections/Pricing/index.js

@@ -107,7 +107,7 @@ const Pricing = () => {
       <div className="headers">
         <h1 className="header-heading">Plans For Every Team Size</h1>
 
-        <div style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
+        <div className="header-controls" style={{ display: "flex", "gap": "1rem", alignItems: "center", "justifyContent": "flex-end", width: "85%" }} >
           <CurrencySelect currency={currency} setCurrency={setCurrency} />
 
           <Box sx={customToggleButtonStyles.container}>

src/sections/Pricing/pricing.style.js

@@ -20,10 +20,12 @@ const PricingWrapper = styled.section`
   @media (min-width: 2048px) {
     height: 30rem;
   }
+
   h1{
     margin-top: -2rem;
   }
 
+
  .header-svg {
     position: absolute;
     bottom: 0;
@@ -35,7 +37,21 @@ const PricingWrapper = styled.section`
     color: white;
     text-align: center;
   }
-}
+
+  @media (max-width: 383px){
+  height:27rem;
+
+  .header-controls{
+  flex-direction: column;
+  gap: 0rem;
+  } 
+
+  h1 {
+    margin-bottom: 1rem;
+  }
+ }
+
+} 
 
 .toggle-container {
   display: flex;
@@ -45,6 +61,11 @@ const PricingWrapper = styled.section`
   font-size: .9rem;
   gap: 10px;
   width: auto;
+
+  @media (max-width: 383px){
+  margin-top: 0rem;
+  }
+
 }
 
 .toggle {