Media query not working in React

Question

I'm trying to hide an image when the screen/viewport has a width over 900px. For some reason, this is not working in a very basic example.

I have an extremely simple component for my footer -- it's functional, no state or methods, and it's only nested under the Main component.

I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, @media doesn't seem to be working.

When I open Chrome devtools, I do see the media query being attached to my element at the appropriate breakpoint, but the style is not being applied even though my screen width is well over 900px. The styles declared in my media query are crossed out. So my element is choosing to maintain the original styles and blocking the media query for some reason. If I add a style in the media query that is not already present in the original class, it is applied.

I have included the following in head in index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

I'm also using React Router (if that makes any difference).

Is React preventing media queries from working? Am I making an extremely dumb mistake somewhere?

Here is my component -- the div with className 'logo' is what I'm trying to toggle:

import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';

function Footer(props) {
  return (
    <div className="footer">
      <span className="column">
        <div className="social-column-container">
          <img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
          <div className="social-icon-container">
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
            <div className="social-icon"></div>
          </div>
        </div>
      </span>
    </div>
  );
}

export default Footer;

Here's the relevant CSS:

/* Small desktop */
@media only screen and (min-width: 900px) {
  .footer
  .column
  .social-column-container
  .logo {
    display: none;
  }
}

/* Mobile */
.footer
.column
.social-column-container
.logo {
  width: 100px;
  height: auto;

  display: inline-block;
  margin-left: 50px;
}

Any help is greatly appreciated!

Update

If the regular class definition and media definition have the same class hierarchy, the media styles are always overridden. However, if the regular definition has any fewer class hierarchies defined, this works.

I've confirmed, by removing all parent 'display' styles, that no other class immediately seems to be causing the style to override.

What is overriding the styles? Why is this happening when I follow best practices and have a good hierarchy defined for CSS classes?

Does this answer your question? [Why are my CSS3 media queries not working on mobile devices?](https://stackoverflow.com/questions/7859336/why-are-my-css3-media-queries-not-working-on-mobile-devices) — Heretic Monkey, Jun 02 '21 at 14:23

score 22 · Accepted Answer · answered Jul 11 '17 at 04:37

22

It's not the problem with react its with the css code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the @media queries to the end of the css page. i.e

.footer
.column
.social-column-container
.logo {
     width: 100px;
     height: auto;
     display: inline-block;
     margin-left: 50px;
 }
@media only screen and (min-width: 900px) {
   .footer
   .column
   .social-column-container
   .logo {
      display: none;
   }
 }

answered Jul 11 '17 at 04:37

Bharath M Shetty

30,075
6
57
108

1

You, sir, are a legend. Somehow I've never ran into that problem, or seen that rule before. Thank you! – Adam Jul 11 '17 at 04:46
I had the same issue, but am using scss and should not have a nesting issue. This does not work for me. The font size shows as changing at the right break points in Chrome DevTools, but the changes occur at much wider screen widths. The changes take place the right amount of times, but just not at the right time. However, the media queries work correctly in Safari, Firefox, and Edge. So this is definitely a Chrome issue and a bug. And it definitely has to do with React in Chrome. When I used a grid and had columns and rows, this did not happen. – Maria Campbell Nov 26 '17 at 09:55
One thing you can do is link this question and open a new question and say there, this ain't helping. That would get more attention and you will be answered in much more detailed way. the problem you are facing is ofcourse style overriding. I cant help without looking how your css and react code looks like. – Bharath M Shetty Nov 26 '17 at 10:00
2

you saved my day. – Nirmal May 14 '18 at 14:01
1

My guy!! Saving the day – rolandforbes Nov 06 '20 at 16:52

score 15 · Answer 2 · answered Aug 19 '19 at 11:52

15

I had some issues starting from a ReactJS perspective, but it turned out to be a Chrome issue.

For Chrome specific issues not applying your CSS media queries (and not the issue as answered above), add this in your <head> section.

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

answered Aug 19 '19 at 11:52

sprinkaan

181
1
3

1

Fixed it for me! Cheers! – IT_puppet_master Mar 02 '20 at 22:54
Had the same issue. This was the culprit. – Juha Untinen Apr 16 '20 at 16:14
Excellent. I was finding here and there for the issue. Thanks a lot. – Avik Aug 03 '21 at 16:07
Worked for me - thought I was going crazy. Anyone know why this is required for Chrome? – neonwatty Oct 12 '22 at 15:57

score 2 · Answer 3 · answered Jul 15 '20 at 11:49

2

I had the same issue but after putting media queries below all the CSS code it is working smoothly. It's because when you apply styles to same elements CSS will choose the code which was declared in the last.

answered Jul 15 '20 at 11:49

Omama Zainab

741
4
14
24

Media query not working in React

3 Answers3