In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. However, when I resize the actual browser window, the media queries fail to work. I even attempted changing the screen resolution, but the issue persisted.

Here are my @media queries:

@media only screen and (max-device-width: 768px) {...}

@media only screen and (max-device-width: 768px) and (min-device-width: 691px) {...}

@media only screen and (max-device-width: 768px) and (min-device-width: 576px) {...}

@media only screen and (max-device-width: 939px) and (min-device-width: 769px) {...}

@media only screen and (min-device-width: 940px) {...}

@media only screen and (min-device-width: 1024px) {...}

@media only screen and (min-device-width: 1200px) {...}

@media only screen and (min-device-width: 1510px) {...}

While it may appear somewhat disorganized due to mixing min and max criteria under certain circumstances, it works flawlessly in Device Mode.

Regarding the HTML viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

I also experimented with altering or deleting the viewport meta tag, yet the problem persists. What could be causing this issue?!

javascripthtmlcssreactjs

Answer №1

device-width is no longer supported, which may be why the changes aren't showing up on your desktop. Try using max or min -width instead in your queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

To see an example, check out this demo where the @media with device width (light blue) doesn't work, but the one with max-width does: https://jsfiddle.net/astombaugh/bceg3nts/5/

body {
  background-color: yellow;
}

@media only screen and (max-device-width: 600px) {
  body {
    background-color: lightblue;
  }
}


@media only screen and (max-width: 650px) {
  body {
    background-color: red;
  }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
</head>
<body>

<h1>The @media Rule</h1>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "yellow".</p>

</body>
</html>

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

Avoiding the default action and using a false return value do not produce the

Despite trying preventDefault, return false, and stopImmediatePropagation, the page continues to redirect back to the first selection instead of redirecting to the textarea after inputting all required fields and clicking on the button. The issue persists ...

javascriptevent-handlingjquery

What is the best way to set up pagination for my table?

I need assistance with implementing a searching functionality for my table using pagination. I believe JQuery will be necessary for this task. Can anyone recommend tutorials that may be helpful? My project is based on C# and MVC, so those resources could a ...

jqueryhtml

Is requestAnimationFrame necessary for rendering in three.js?

I am currently working on the example provided in Chapter 2 of the WebGL Up and Running book. My goal is to display a static texture-mapped cube. The initial code snippet is not functioning as expected: var camera = null, renderer = null, scene = null ...

javascriptthree.jsrendering

What are the steps to create a connect4 board featuring rounded corners and curved sides?

How can I create a Connect4 board with the exact styles and properties shown in the image? I want to achieve the curved sides effect as displayed. Can this be done using only HTML elements, or is there an easy SVG solution available? Here is my current co ...

javascripthtmlcss

Unexpected Data Displayed by Material UI Modal Component

I'm currently facing an issue with my Material UI Modal component in a React/Typescript project. When a card element is clicked on the site, it should display expanded information in a modal view. However, clicking on any card only shows the most rece ...

reactjstypescriptmaterial-uifrontend

angular table disabled based on condition

I have a table in my HTML file and I am trying to figure out how to disable the onClick function if the start date is greater than the current date. <ng-container matColumnDef="d"> <th mat-header-cell ...

javascriptangular

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

While working with Next.js, I encountered an issue when trying to upload an image to Firebase storage. Despite my efforts, I encountered just one error along the way. Initialization of Firebase Admin SDK // firebase.js import * as admin from "firebas ...

javascriptnode.jsfirebasenext.jsfirebase-storage

Arrange divs next to each other using CSS

I am currently working with a basic layout on my webpage <div id="content-wrap"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div ...

htmlcss

What is the best way to insert distinct values into an array in mongoDB?

I have a table of likes, and within that table, there is an array called videoLikes. I want to store the userData of users who have liked the video. However, when I attempt to add an object with a userId field to that array, I end up with duplicate data. S ...

javascriptnode.jsarraysmongodb

Impressive javascript - extract file from formData and forward it

Presented here is my API handler code. // Retrieve data. const form = formidable({ multiples: true }); form.parse(request, async (err: any, fields: any, files: any) => { if (!drupal) { return response.status(500).send('Empty ...

javascriptnode.jsnext.jsform-dataformidable

How to centrally position an image within a div using Bootstrap

I am a fan of using bootstrap and I recently encountered an issue with applying max-width to an image. It seems that when I do this, the image does not center properly despite using text-center. The solution I found was simply removing the max-width to ...

htmlcssimagetwitter-bootstrapdisplay

Utilize HTML, AJAX, and JavaScript to retrieve the location of the current user and display markers for other users on a

I am attempting to display on a single map the current location of a user and markers for other users, whose locations are obtained through an ajax post. In essence, I am looking to merge the concepts from: Google Maps Geolocation Example with: Multiple ...

javascriptphpajaxgoogle-mapsgoogle-maps-markers

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

htmlcssresponsive-designhtml-tablehtml-email

Tips for extracting unique values from two arrays and returning them in a new array using JavaScript

Hello, I need assistance with combining two arrays. Array a contains [1,2,3] and array b contains [2,5]. I would like the result array to only include elements that are unique between the two arrays, such as [5]. Can you please provide guidance on how to ...

javascript

"Attempting to connect to REST server using angularjs $resource. Unexpectedly, the success callback does not

After attempting to set up a REST server on Nodejs and accessing it from AngularJS using $resource for the first time, I have encountered some issues... In my controller, I am trying to load a JSON object (shopping cart) upon login for existing users or c ...

javascriptnode.jsangularjsrestify

Developing and removing a Prisma entry with tRPC

I am currently working on implementing the feature to create and delete a Prisma record directly from my component. While my router seems error-free, I am encountering type errors within my component. The errors are specifically related to { title, conten ...

reactjsnext.jsreact-hooksprismatrpc

Activate the class using Vue with the v-for directive

I'm curious about the v-for functionality. Why is it necessary to use this.activeClass = {...this.activeClass} to update the component? I noticed that the component does not update after this line of code. if (this.activeClass[index]) { ...

javascriptvue.js

issue with brightcove player's complete event not triggering upon video replay

I have a videoplayer with an event listener added in an onTemplateReady function. Upon completion of the video, I want to replay it: videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, completedCallback); function completedCallback(){ ...

javascriptjqueryhtml5-videobrightcove

The parameters 'event' and 'payload' do not match in type

Upon running the build command, I encountered a type error that states: Type error: Type '(event: React.FormEvent) => void' is not assignable to type 'FormSubmitHandler'. Types of parameters 'event' and 'payload&apos ...

reactjstypescriptnext.jsbuild-error

Eliminating the background color upon clicking

Here is the link structure I have set up: <ul> <li><a href="home.html"><span>home</span></a></li> </ul> However, when I click on the link, a shadow appears. I would like the link to appea ...

htmlcssbootstrap-4