I've been searching for a while now, but I just can't seem to find a solution to my problem. I'm attempting to utilize different files for my media query breakpoints in Next JS, but they don't appear to be working.
I created the files in: styles/queries/sizeone.css (the first breakpoint)
I imported them into my _app.tsx like this, and also modified the viewport tag from the default Next JS head.
import { AppProps } from 'next/app';
import Head from 'next/head'
import '../styles/globals.css'
import '../styles/normalize.css'
import '../styles/queries/sizeone.css'
function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App;
This is what's inside my sizeone.css file, which contains a simple media query.
@media only screen and (min-width: 1px) and (max-width: 767px){
#hero .content .title h1 {
text-align: center;
color: var(--main-color);
font-family: var(--main-font);
font-weight: 700;
font-size: 20px;
margin: 0 0;
}
}
Here's how I'm applying styles to the elements:
<section id={styles.hero}>
<div className="wrapper">
<div className={styles.content}>
<div className={styles.title}>
<h1>Creating <span className="gradient-text">remarkable</span> <br /><span className="gradient-text">experiences</span> through digital art.</h1>
<p>Freelancing UI/UX design & Front-end development</p>
This is the part that is shown within the sizeone.css file.
Thank you for taking the time to read my question, hopefully we can find a resolution soon :)