Menu
I just integrated Nextjs SSR into my React project. Before this, my css media queries for mobile-responsiveness were working perfectly. Now, when I use Chrome's tools to view my app on a mobile screen size or even on my own device, I get the view as if it's on desktop.
It seems like the server is rendering the entire page and assuming desktop size and not re-rendering when it hits the client. If that's the case, how do I tell it the user is mobile and to use those CSS queries?
Here are my media queries that don't seem to be working. I'm not using CSS in JS, maybe I should be? I'm using regular css files for each component.
.Footer {
width: var(--webMaxContentWidth);
height: 200px;
background: #368efb;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 768px) {
.Footer {
width: 100%;
height: 400px;
margin: 0 20px;
}
}
Any help is appreciated!
828
How do you guys use CSS media queries in Next.js? Should I include them in a css file imported to _app? You can use them anywhere you use CSS, whether that's in a global CSS file imported via _app.js, a CSS module loaded at the component level, or within a <style jsx> tag (I use this personally). There's nothing different in how it's used.
I just integrated Nextjs SSR into my React project. Before this, my css media queries for mobile-responsiveness were working perfectly. Now, when I use Chrome's tools to view my app on a mobile screen size or even on my own device, I get the view as if it's on desktop.
For example, a common CSS media query for mobile devices is to change the menu style, since these devices often have completely different requirements for menus. The typical horizontal menu used on desktop screens doesn’t work on a phone because it makes buttons too small to tap on with a finger.
CSS modules: CSS files imported in the _app.js file should be global to the entire application and you shouldn't use CSS modules here - use standard CSS. Any other styles that are specific to a particular component should be imported in the respective component's JS/TS file and the preferred way of doing this in Next.js is using CSS modules.
Before, React was automatically inserting the following in the <head> of your SPA:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Once you moved to SSR, the responsibility moved to the developer to add this bit themselves. Without it, you'd have some very unexpected behavior when it came to @media query breakpoints. As you discovered after resolving your issue, this has been solved already.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
