Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with useMediaQuery({minWidth: <value>, maxWidth: <value>})

See original GitHub issue

const isLaptop = useMediaQuery({ minWidth: 992, maxWidth: 1199}); 

const isDesktop = useMediaQuery({ minWidth: 1200, maxWidth: 1919 }); 
  
console.log('laptop', isLaptop, 'desktop', isDesktop);

This will log laptop false desktop false in screensize 1199;

Expected output : laptop true desktop false

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

yocontracommented, Jul 29, 2021

@tacmoktan My question (and why I linked the previous stackoverflow post) - have you tried this using a plain CSS media query, and is the result the same? If so - the issue is not this library, it is just how CSS media queries work - you need to overlap them sometimes for breakpoints like this (see the StackOverflow post for more info).

0reactions

tacmoktancommented, Jul 30, 2021

Ok. I tried it. Seems like that’s how CSS media query works. My bad. Thank you for your response.

Top Results From Across the Web

CSS Media Min-Width & Max-Width Queries - How They Work

Learn to use media max width and min width to develop responsive emails for ... This can be used to address layout or...

Media min-width & max-width - css - Stack Overflow

First, the issue was when my I resized my browser with max-device-with it worked on the phone but not in the broswer, without...

minWidth and maxWidth same value, dupe content, expected?

CSS Media Queries will apply both selectors for min and max width when the values are the same: @media (max-width: 768px) { }...

useMediaQuery - Chakra UI

Return value#. The useMediaQuery hook returns an array of booleans, indicating whether the given query matches or queries match. Why an array? useMediaQuery...

How to Set Width Ranges for Your CSS Media Queries

Once the max-width property gets a value assigned to it, all the styles within that particular media query will be applied to any...