Menu
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?
634
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">
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
