What are the best practices for implementing media queries in Next.js 13.4?

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?

Answer №1

I encountered a similar issue and managed to find a solution

The following code snippet initially did not produce the desired outcome for me:

.burgerBtn {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  width: 22px;
  @media (max-width: 1100px) {
    display: flex;
  }
}

However, I made the necessary adjustment:

@media (max-width: 1100px) {
  .burgerBtn{
    display: flex
  }
}

After implementing this change, the issue was resolved successfully

Answer №2

From what I understand, there really is no need to add the viewport metadata, title, or favicon links in your code. Next.js offers a more streamlined way of handling these through the Metadata api and an exported variable from your main layout file if you're using the app router. Make sure to include all necessary information in the metadata export since you are already utilizing that feature. For more details on what's available, take a look at type Metadata.

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

As for the responsiveness issue you mentioned, it would be helpful to provide more specific details on what exactly isn't working as expected. So far, the code shared doesn't give much insight into that particular problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining round brackets and square brackets when initializing an array

In the snippet below, values are assigned with a mix of parentheses and square brackets without any errors. However, most other combinations (such as parentheses inside square brackets) do not work at all. var myItems = []; myItems[5] = ("A1", "B1", ["C1" ...

Using jQuery to define and apply style attributes

I'm currently working on a script that will add a left and right border to a button in a row of 3 buttons when that specific button is clicked. The goal is for the borders to remain while the button is active, and disappear once another button is clic ...

What is the best way to save a current HTML element for later use?

Here is a simple HTML code that I would like to save the entire div with the class test_area and then replicate it when needed. Currently, my goal is to duplicate this div and place the clone underneath the original element. How can I achieve this? Unfortu ...

Altering the context of 'this' with the bind method in JavaScript

When using bind to change the scope of 'this', it allows me to reference my generateContent function using 'this' within the click function. However, this adjustment causes the this.id to no longer work due to the changed scope. Is the ...

Problems with Searching in Bootstrap Tables

I'm experiencing a basic bootstrap error. I attempted to create a searchable table using this example: Unfortunately, the search function is not working when applied to my table. The table appears fully populated, but entering search terms like "CRY" ...

Warning triggered Grunt cancellation

I've successfully installed "npm" on my local machine. When it comes to installing grunt in my Gruntfile.js directory, I follow these steps: npm install grunt npm install -g grunt-cli grunt watch Although the tasker is up and running, I en ...

Is there a way to assign API data as inner HTML using Lit?

Need help setting inner html of html elements with a get request Any suggestions on how to achieve this? import { LitElement, html, css } from "lit"; import { customElement } from "lit/decorators.js"; import axios from "axios" ...

Leveraging the power of the map function to cycle through two arrays

Right now in React, I am utilizing array.map(function(text,index){}) to loop through an array. But, how can I iterate through two arrays simultaneously using map? UPDATE var sentenceList = sentences.map(function(text,index){ return <ListGr ...

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...

Deciding on the Best Option for Your Admin Dashboard: Next.js 13 AppRouter vs. Pure React

When creating an admin dashboard, should I opt for Next.js 13 App router or stick to building a single-page application with pure React? I've noticed that Next.js can struggle with interactivity on slower connections. Which approach would provide bett ...

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

Layout featuring center-aligned fixed-width design with elements stretching across the entire width of the page

How can I create a centered fixed-width layout for my page while also having headings with a background that extends over the whole page, without having to break up the single fixed-width+margin auto div into many separate divs? ...

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

I am attempting to create a stylish border for the .navbar-collapse element, but unfortunately, my efforts have been unsuccessful so far

I need assistance with adding a border around my mobile drop-down menu. I've tried using .navbar-collapse but it's not working. Any suggestions? Here is a sample image of the mobile size: https://i.sstatic.net/O9oA1.png Below is my code: < ...

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from ri ...

The function document.getElementById is unable to select multiple elements simultaneously

I've been tackling a loading issue. I have a visible div, #loading, and multiple hidden divs, #message. I also have a JavaScript function. function loading() { setTimeout(function() { document.getElementById("loading").style.display = " ...

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

Tips for keeping your Timezone in check

My situation involves a client in India and a server in the USA. When a user submits a post from India, it gets stored on the USA server, causing the post submission time to be displayed in USA time. I am looking for a solution to display the post submit ...

JavaScript is failing to add items to an array

Attempting to add coordinates and user-specified data from a form to an array named "seatsArray". Here's the code snippet: <div> <img onLoad="shiftzoom.add(this,{showcoords:true,relativecoords:true,zoom:100});" id="image" src="plan1.bmp" wid ...