Media query not working in React

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;
   }
 }

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">


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.

Tags:

Css

Media Queries

Reactjs

Recent Posts