My media queries are not working in my next.js project. Here is what I have tried so far:
- I added my queries in "styles.module.css" and "global.css" and imported them in layout.js
- I included the viewport meta tag under a Head tag in layout.js
This is how my current layout.js file looks:
import "./globals.css";
import styles from "./styles.module.css";
import { Inter } from "next/font/google";
import Footer from "../components/Footer";
import Head from "next/head";
import Script from "next/script";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "My website",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<>
<html lang="en">
<Head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
></meta>
<title>My Website</title>
<link
rel="shortcut icon"
type="image/x-icon"
href="/images/favicon.ico"
/>
</Head>
<body className={inter.className}>{children}</body>
</html>
</>
);
}
Am I missing anything or doing something wrong?