author-profile fix

ramo-dev · Mar 7, 2024 · 39c4b44 · 39c4b44
1 parent 811c5b9
commit 39c4b44
Showing 1 changed file with 208 additions and 3 deletions.
diff --git a/src/components/blogsData/blogsStyles.css b/src/components/blogsData/blogsStyles.css
@@ -303,7 +303,7 @@ color:var(--text-color)
         padding: 1% 1% 0 0;
         display: flex;
         position: absolute;
-        margin: 65px 19% 0 0%;
+        margin: 75px 19% 0 0%;
         z-index: 0;
         width: 97%;
         top:4%;
@@ -317,7 +317,7 @@ color:var(--text-color)
         display: none;
         font-size: 1rem;
         position: absolute;
-        margin:40% 2%;
+        margin:40px 2%;
     }
     .querySection input , button{
         padding:.6rem;
@@ -336,7 +336,7 @@ color:var(--text-color)
     }
     .blogSection{
         max-width:97%;
-        margin:37% 3% 0 2%;
+        margin:130px 3% 0 2%;
     }
     .blogSection h1{
         display: none;
@@ -421,4 +421,209 @@ color:var(--text-color)
     }
 
 
+  }
+
+
+  @media screen and (max-width:800px) {
+    .roundedToggleMobile{
+        display: block;
+        right:5%;
+        top:89%;
+        cursor: pointer;
+        font-size: 1.3rem;
+    }
+    .blogContainer{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color:var(--text-color);
+        align-items: flex-start;
+        padding:7% 1%;
+    }
+    .querySection{
+        padding: 1% 1% 0 0;
+        display: flex;
+        position: absolute;
+        margin: 80px 19% 0 0%;
+        z-index: -1;
+        width:90%;
+        top:4%;
+        align-items: center;
+        justify-content: center;
+    }
+    .querySection h1{
+        display: none;
+    }
+    .blogSection{
+        width:100% ;
+        margin:140px 1% 0 1%;
+
+    }
+    .blogSection h1{
+        display: none;
+    }
+    .blogCard{
+        background: var(--background-color);
+        padding:2% 3% 3%  3%;
+        margin-bottom: 5%;
+        border: 1px solid grey;
+        color: var(--text-color);
+        transition: 0.2s ease-in-out;
+        width: 100%;
+    }
+
+  }
+
+
+
+  @media screen and (min-width:800px) {
+    .roundedToggleMobile{
+        display: block;
+        right:5%;
+        top:89%;
+        cursor: pointer;
+        font-size: 1.3rem;
+    }
+    .blogContainer{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color:var(--text-color);
+        align-items: flex-start;
+        padding:7% 1%;
+    }
+    .querySection{
+        padding: 1% 1% 0 0;
+        display: flex;
+        position: absolute;
+        margin: 60px 19% 0 0%;
+        z-index: -1;
+        width:50%;
+        top:4%;
+        align-items: center;
+        justify-content: center;
+    }
+    .querySection h1{
+        display: none;
+    }
+    .blogSection{
+        width:60% ;
+        margin:100px 3% 0 2%;
+
+    }
+    .blogSection h1{
+        display: none;
+    }
+    .blogCard{
+        background: var(--background-color);
+        padding:2% 3% 3%  3%;
+        margin-bottom: 5%;
+        border: 1px solid grey;
+        color: var(--text-color);
+        transition: 0.2s ease-in-out;
+        width: 85%;
+    }
+
+  }
+
+
+
+
+
+  @media screen and (min-width:1200px) {
+    .roundedToggleMobile{
+        display: block;
+        right:5%;
+        top:89%;
+        cursor: pointer;
+        font-size: 1.3rem;
+    }
+    .blogContainer{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color:var(--text-color);
+        align-items: flex-start;
+        padding:7% 1%;
+    }
+    .querySection{
+        padding: 1% 1% 0 0;
+        display: flex;
+        position: absolute;
+        margin: 65px 19% 0 0%;
+        z-index: -1;
+        width:43%;
+        top:4%;
+        align-items: center;
+        justify-content: center;
+    }
+    .querySection h1{
+        display: none;
+    }
+    .blogSection{
+        width:50%;
+        margin:70px 3% 0 2%;
+    }
+    .blogSection h1{
+        display: none;
+    }
+    .blogCard{
+        background: var(--background-color);
+        padding:2% 3% 3%  3%;
+        margin-bottom: 5%;
+        border: 1px solid grey;
+        color: var(--text-color);
+        transition: 0.2s ease-in-out;
+    }
+
+  }
+
+
+  @media screen and (min-width:1380px) {
+    .roundedToggleMobile{
+        display: block;
+        right:5%;
+        top:89%;
+        cursor: pointer;
+        font-size: 1.3rem;
+        padding: 0 50%;
+    }
+    .blogContainer{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        color:var(--text-color);
+        align-items: flex-start;
+        padding:7% 1%;
+    }
+    .querySection{
+        padding: 1% 1% 0 0;
+        display: flex;
+        position: absolute;
+        margin: 65px 19% 0 0%;
+        z-index: -1;
+        width:53%;
+        top:4%;
+        align-items: center;
+        justify-content: center;
+    }
+    .querySection h1{
+        display: none;
+    }
+    .blogSection{
+        max-width:97%;
+        margin:10% 3% 0 2%;
+    }
+    .blogSection h1{
+        display: none;
+    }
+    .blogCard{
+        background: var(--background-color);
+        padding:2% 3% 3%  3%;
+        margin-bottom: 5%;
+        border: 1px solid grey;
+        color: var(--text-color);
+        transition: 0.2s ease-in-out;
+    }
+
   }