Using media queries

codegino · Dec 1, 2021 · 5ab6fc7 · 5ab6fc7
1 parent 55e1aa5
commit 5ab6fc7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/app/routes/words.tsx b/app/routes/words.tsx
@@ -4,15 +4,19 @@ import { supabase } from "~/libs/supabase-client";
 import { Word } from "~/models/word";
 import type { LinksFunction } from "remix";
 import styles from "~/styles/words.css";
+import smStyles from "~/styles/words-sm.css";
 
-export const links: LinksFunction = () => {
-  return [
-    {
-      rel: "stylesheet",
-      href: styles,
-    },
-  ];
-};
+export const links: LinksFunction = () => [
+  {
+    rel: "stylesheet",
+    href: styles,
+  },
+  {
+    rel: "stylesheet",
+    href: smStyles,
+    media: "(max-width: 600px)",
+  },
+];
 
 export const loader: LoaderFunction = async () => {
   const { data: words } = await supabase

diff --git a/app/styles/words-sm.css b/app/styles/words-sm.css
@@ -0,0 +1,8 @@
+.words__content {
+  grid-template-columns: 1fr;
+  border: none;
+}
+
+.words__content form {
+  margin-top: 1rem;
+}