grid fix

andrewsolonets · Sep 17, 2022 · b92235b · b92235b
1 parent 0897082
commit b92235b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/Components/Grid/Grid.styles.js b/src/Components/Grid/Grid.styles.js
@@ -108,7 +108,7 @@ export const GridItemWrapper = styled.div`
 `;
 
 export const GridContainer = styled.div`
-  width: 68rem;
+  width: 70rem;
   display: grid;
   height: auto;
   grid-gap: 2rem;

diff --git a/src/Components/SearchBar/SearchBar.styles.js b/src/Components/SearchBar/SearchBar.styles.js
@@ -8,7 +8,7 @@ export const SearchWrapper = styled.div`
   }
 
   @media (min-width: 37.5em) and (max-width: 75em) {
-    width: 66%;
+    width: fit-content;
     left: 8rem;
     right: 2rem;
     position: absolute;
@@ -41,10 +41,34 @@ export const SearchInput = styled.input`
   &:active {
     border-color: var(--main);
   }
-  @media (max-width: 75em) {
+  @media (min-width: 37.5em) and (max-width: 42em) {
+    width: 50vw;
+    padding: 1.3rem 2rem;
+  }
+  @media (min-width: 42em) and (max-width: 50em) {
+    width: 55vw;
+    padding: 1.3rem 2rem;
+  }
+  @media (min-width: 50em) and (max-width: 60em) {
+    width: 65vw;
+    padding: 1.3rem 2rem;
+  }
+  @media (min-width: 60em) and (max-width: 75em) {
+    width: 70vw;
+    padding: 1.3rem 2rem;
+  }
+  @media (max-width: 28.5em) {
     width: 88%;
     padding: 1.3rem 2rem;
   }
+  @media (min-width: 24.5em) and (max-width: 28.5em) {
+    width: 90%;
+    padding: 1.3rem 2rem;
+  }
+  @media (min-width: 28.5em) and (max-width: 37.5em) {
+    width: 90vw;
+    padding: 1.3rem 2rem;
+  }
 
   ${(props) => (props.styleChange ? "border-color: var(--main)" : "")}
 `;

diff --git a/src/pages/FiltersContainer/BreedsFilters.js b/src/pages/FiltersContainer/BreedsFilters.js
@@ -52,7 +52,7 @@ export const BreedsFilters = ({
       "@media (min-width: 37.5em) and (max-width: 75em)": {
         ...provided["@media (min-width: 37.5em) and (max-width: 75em)"],
         width: "33vw",
-        height: "7vw",
+        height: "5rem",
       },
 
       width: "16vw",
@@ -74,7 +74,7 @@ export const BreedsFilters = ({
       "@media (min-width: 37.5em) and (max-width: 75em)": {
         ...provided["@media (min-width: 37.5em) and (max-width: 75em)"],
         width: "33vw",
-        height: "7vw",
+        height: "5rem",
       },
 
       borderColor: state.isFocused ? "#fffff" : "#fffff",
@@ -115,7 +115,7 @@ export const BreedsFilters = ({
       "@media (min-width: 37.5em) and (max-width: 75em)": {
         ...provided["@media (min-width: 37.5em) and (max-width: 75em)"],
         width: "25vw",
-        height: "7vw",
+        height: "5rem",
       },
       // none of react-select's styles are passed to <Control />
       width: "12vw",
@@ -138,7 +138,7 @@ export const BreedsFilters = ({
       "@media (min-width: 37.5em) and (max-width: 75em)": {
         ...provided["@media (min-width: 37.5em) and (max-width: 75em)"],
         width: "25vw",
-        height: "7vw",
+        height: "5rem",
       },
       width: "12vw",
       borderColor: state.isFocused ? "#fffff" : "#fffff",