filtering terms css

elixir-europe · Feb 22, 2024 · e037e91 · e037e91
1 parent 8116332
commit e037e91
Showing 1 changed file with 44 additions and 20 deletions.
diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css
@@ -4,16 +4,21 @@
   width: 100%;
 }
 
-.search-tr1 {
+.search-tr2 {
   display: flex;
-  width: 34%;
+  margin: 0px;
+  width: 100%;
 }
-
-.search-tr2 {
+.search-tr1 {
   display: flex;
-  width: 60%;
+  width: 100%;
+}
+.searchTermInput {
+  margin: 5px;
+  width: 70%;
+  height: 28px;
+  margin-left: 34px;
 }
-
 
 .inputTerm {
   display: flex;
@@ -41,7 +46,7 @@ thead {
   width: 100%;
 }
 
-tbody{
+tbody {
   width: 60vw !important;
 }
 
@@ -54,12 +59,11 @@ tbody{
 
 #table {
   display: flex;
- 
+
   font-size: 15px;
   /* width: 90%; */
   flex-direction: column;
   margin-left: 1vw;
-
 }
 
 .tableWrapper {
@@ -106,7 +110,7 @@ tbody{
 }
 .th2 {
   display: flex;
-  width: 35%;
+  width: 68%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -161,7 +165,7 @@ tbody{
 
 .th2 {
   display: flex;
-  width: 30%;
+  width: 68%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -189,7 +193,7 @@ tbody{
 
 .th4 {
   display: flex;
-  width: 32%;
+  width: 52%;
   /* height: 100%; */
   /* justify-content: center; */
   margin-top: 12px;
@@ -244,12 +248,6 @@ tbody{
   margin-right: 7px;
 }
 
-.searchTermInput {
-  margin: 5px;
-  width: 60%;
-  height: 28px;
-}
-
 .searchTermInput1 {
   width: 60%;
   height: 28px;
@@ -270,15 +268,41 @@ tr {
 }
 
 .terms2 {
-
   width: 100%;
 }
 
-
 .checkbox {
   margin-right: -25px;
 }
 
 .checkbox2 {
   border: none;
 }
+
+@media (max-width: 1280px) {
+  tbody {
+    width: 90vw !important;
+  }
+  .search-tr2 {
+    display: flex;
+    margin: 0px;
+    width: 100%;
+  }
+  .search-tr1 {
+    display: flex;
+    width: 100%;
+  }
+  .searchTermInput {
+    margin: 5px;
+    width: 70%;
+    height: 28px;
+    margin-left: 34px;
+  }
+  .tableWrapper {
+    height: 100vh;
+    width: 95vw;
+    overflow: scroll;
+    display: flex;
+    justify-content: center;
+  }
+}