make <KinkCheck /> fully scalable

unfortunately using @container dark magic that only current browser versions support qwq
chrissxMedia · Jan 31, 2024 · fb37dd0 · fb37dd0
1 parent 451de29
commit fb37dd0
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/components/KinkCheck.module.css b/src/components/KinkCheck.module.css
@@ -1,12 +1,14 @@
 .catcontainer {
+ width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  column-gap: 2ch;
+ container: catcontainer / inline-size;
 }
 
 .table {
- border: 1px solid #303030;
+ border: 0.05em solid #303030;
  border-collapse: collapse;
  font-size: 1.333em;
 }
@@ -20,7 +22,7 @@
  min-width: 28%;
 }
 
-@media screen and (width <= 800px) {
+@container catcontainer (width <= 50em) {
  .category,
  .table {
  width: 100%;