Worked on responsiveness of "Search By Ingredient" page

Noxtrah · Feb 24, 2024 · 989d894 · 989d894
1 parent 22ac93b
commit 989d894
Showing 1 changed file with 123 additions and 2 deletions.
diff --git a/styles/searchByIngredientTab.css b/styles/searchByIngredientTab.css
@@ -132,6 +132,7 @@ input {
     display: flex;
     flex-wrap: wrap;
     padding-left: 9vw;
+    min-width: 80vw;
 }
 
 .recipe-item {
@@ -163,7 +164,7 @@ input {
 
 .image-container {
     position: relative;
-    width: 318px;
+    min-width: 318px;
     height: 218px;
     grid-column: 1;
     grid-row: 1;
@@ -224,4 +225,124 @@ input {
     margin-inline-end: 0.3vw;
     border: 1px solid var(--dark_grey);
     border-radius: 4px;
-}
+}
+
+@media screen and (max-width: 600px){
+    .recpes{
+        justify-content: center;
+        min-width: 100vw;
+    }
+
+    .recipe-item {
+        width: 80vw;  /* Adjust the width for smaller screens */
+        /* position: relative;
+        grid-auto-rows: 46vh; */
+    }
+
+
+    .border{
+        margin-top: -1.5vh;
+        width: 75vw;
+        border: 2px solid var(--dark_grey);
+        border-radius: 20px;
+    }
+
+    .content-container {
+        display:contents;
+        /* flex-direction: row; */
+    }
+
+    .image-container{
+        max-height: 20vh;
+        /* min-width: 74vw; */
+        max-width: 80vw;
+        padding:1vw;
+        /* padding-right: 2.5vw; */
+    }
+
+    .recipe-item img {
+        padding: 0vw;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+    }
+
+    .info-container{
+        display: flex;
+        flex-wrap: wrap;
+        position:relative;
+        align-items: flex-start;
+        padding-inline: 0.5vw;
+        /* margin-top: 10px; */
+        padding-bottom: 10px;
+        height: 100%;
+        max-width: 100%;
+    }
+
+    .info-container-2{
+        display: flex;
+        flex-wrap: wrap;
+        position:relative;
+        align-items: flex-start;
+        padding-inline: 0.5vw;
+        /* margin-top: 10px; */
+        margin-block-start: -10px;
+        padding-bottom: 10px;
+        height: 100%;
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 410px) {
+    .recipes{
+        /* padding-inline: 12vw; */
+        justify-content: center;
+        min-width: 100vw;
+    }
+
+    .recipe-item {
+        width: 80vw;  /* Adjust the width for smaller screens */
+        /* position: relative;
+        grid-auto-rows: 46vh; */
+    }
+
+    .info-container {
+        display: flex;
+        position:relative;
+        height: 100%;
+        width: 400px;
+        align-items: flex-start;
+        padding-inline: 1vw;
+        margin-top: 10px;
+        grid-column: 2;
+        grid-row: 1;
+        /* flex-grow: 1;
+        max-width: 600px; */
+        /* border-top: 1px solid blue;
+        border-right: 1px solid blue; 
+        border-left: 1px solid blue; */
+    }
+
+    .info-container-2{
+        display: flex;
+        flex-wrap: wrap;
+        position:relative;
+        align-items: flex-start;
+        padding-inline: 0.5vw;
+        /* margin-top: 10px; */
+        padding-bottom: 10px;
+        height: 100%;
+        max-width: 300px;
+        /* border-right: 1px solid red; 
+        border-bottom: 1px solid red;
+        border-left: 1px solid red; */
+        grid-column: 1 / 3;
+        grid-row: 2 / 2;
+    }
+
+    .recipe-tag{
+
+    }
+
+}