Responsiveness

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -3,19 +3,29 @@ import styled from "styled-components";
 import selectedTheme from "../../../themes";
 
 export const FilterCardContainer = styled(Box)`
+  position: fixed;
   border-radius: 0;
   border-top-right-radius: 4px;
-  margin-top: -24px;
   height: calc(100% - 90px);
   padding: 36px;
   background-color: white;
   width: calc(100% / 12 * 2.4);
-  position: fixed;
   left: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: white;
+  min-width: fit-content;
+  z-index: 9;
+  margin-top: -24px;
+  transition: all ease-in-out .36s;
+  @media (max-width: 900px) {
+    margin-left: -400px;
+    transition: all ease-in-out .36s;
+  }
+  @media (max-width: 600px) {
+    margin-top: -14px;
+  }
 `;
 export const Title = styled(Typography)`
   font-size: 24px;
@@ -34,7 +44,6 @@ export const Header = styled(Box)`
 `;
 
 export const Footer = styled(Box)`
-
   position: "sticky";
   bottom: 0;
   & div button {
@@ -62,5 +71,4 @@ export const ContentContainer = styled(Box)`
   scrollbar-width: thin;
   scrollbar-color: #ddd;
   ${() => window.scrollbars.visible && `padding-right: 15px;`}
-`
-
+`;

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -58,28 +58,32 @@ export const OfferDetails = styled(Box)`
   display: flex;
   flex-direction: row;
   flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
-  justify-content: space-between;
+  justify-content: start;
+  gap: 1rem;
 `;
 export const OfferCategory = styled(Box)`
   font-family: "Open Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
-  width: 33%;
+  @media (max-width: 1000px) {
+    display: none;
+  }
 `;
 export const OfferPackage = styled(Box)`
   font-family: "Open Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
-  width: 34%;
 `;
 export const OfferViews = styled(Box)`
   font-family: "Open Sans";
   color: ${selectedTheme.primaryText};
   line-height: 16px;
   font-size: 12px;
-  width: 34%;
+  @media (max-width: 1200px) {
+    display: none;
+  }
 `;
 export const OfferDescriptionTitle = styled(Box)`
   font-family: "Open Sans";
@@ -98,17 +102,26 @@ export const OfferDescriptionText = styled(Box)`
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
+  @media (max-width: 1500px) {
+    display: none;
+  }
 `;
 export const OfferDescription = styled(Box)`
   flex: 3;
   margin: auto 0;
   padding-left: 35px;
+  @media (max-width: 1500px) {
+    display: none;
+  }
 `;
 export const Line = styled(Box)`
   border-left: 1px solid rgba(0, 0, 0, 0.15);
   height: 100px;
   width: 0;
   margin: auto 0;
+  @media (max-width: 1500px) {
+    display: none;
+  }
 `;
 export const DetailIcon = styled(Icon)`
   & svg {
@@ -136,6 +149,9 @@ export const CheckButton = styled(PrimaryButton)`
     background-color: ${selectedTheme.primaryPurple} !important;
     color: white !important;
   }
+  @media (max-width: 650px) {
+    display: none;
+  }
 `;
 export const MessageIcon = styled(IconButton)`
   width: 40px;

src/components/Dropdown/DropdownList/DropdownList.styled.js

@@ -18,6 +18,7 @@ export const DropdownTitle = styled(Typography)`
   font-weight: 400;
   padding-bottom: 10px;
   padding-top: 5px;
+  padding-right: 0.9rem;
   font-family: "Open Sans";
   color: ${props => props.textcolor ? props.textcolor : selectedTheme.primaryText};
 `;

src/components/MarketPlace/Header/Header.styled.js

@@ -7,9 +7,9 @@ export const HeaderContainer = styled(Box)`
     margin-top: 20px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
 `
 export const HeaderLocation = styled(Box)`
-    padding-top: 10px;
     font-family: "Open Sans";
     color: ${selectedTheme.primaryPurple};
     font-weight: 700;
@@ -19,6 +19,9 @@ export const HeaderLocation = styled(Box)`
 `
 export const HeaderButton = styled(IconButton)`
     padding: 2px 10px;
+    @media (max-width: 1500px) {
+        display: none;
+    }
 `
 export const HeaderOptions = styled(Box)`
     display: flex;

src/components/MarketPlace/MarketPlace.styled.js

@@ -4,4 +4,7 @@ import styled from "styled-components";
 export const MarketPlaceContainer = styled(Box)`
   height: 100%;
   margin: 0 70px;
+  @media (max-width: 600px) {
+    margin: 0 1.8rem;
+  }
 `;

src/layouts/MainLayout/MainLayout.js

@@ -8,10 +8,10 @@ const MainLayout = (props) => {
     <MainLayoutContainer>
       {props.children}
       <Grid container maxHeight="xl">
-        <LeftCard item xs={2} lg={3} xl={2.4} md={4} >
+        <LeftCard item xs={0} sm={0} md={3} lg={3} xl={2.4} >
           {props.leftCard}
         </LeftCard>
-        <Content item xs={10} lg={9} xl={9.6} md={8} >
+        <Content item xs={12} sm={12} md={9} lg={9} xl={9.6} >
           {props.content}
         </Content>
       </Grid>