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?
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.
Related
Firstly, I created style for Mobile view and here is the CSS.
.content>.hello{
font-size: 6vw;
color: white;
}
After that I change some style for desktop view
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
So, now when I uploaded the CSS to the server, I can see the media query works well on my laptop.When I resize my browser, it works well. But the problem is after I check the website on my phone, the media query also applied there. It supposed to have font size of 6vw on the phone.
Okay, it is solved. I added this meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and i forgot to update the html file to the server. Took me hours for this problem😩.
When I reduce the width of my browser window, I can see the font size changing.
Isn't that a cache problem ?
Is the phone screen really less than 600 pixels ?
I got into the habit in my link tags of introducing an unnecessary parameter, but I can change its value each time I modify the stylesheet.
<link rel="stylesheet" href=".../styles.css?v=17"/>
The thing is that you have two rules:
General rule
.content>.hello{
font-size: 6vw;
color: white;
}
This is applied to all devices.
Desktop rule
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
This is applied to desktop
Possible problems
since the rules have the same selector, therefore they have the same priority, in the case of desktop the one which runs later applies. You will need to either put the general rule before the media query, or transform your general rule to a media query of its own
your phone might have a width of 600px or more, you will need to check the dimensions of the phone in pixels as well
i just try, how about this :
.content>.hello{
font-size: 6vw;
color:white;
background-color:black;
}
#media screen and (max-width:600px){
.content>.hello{
font-size:5vw;
margin-top:50px;
}
}
<div class="content">
<div class="hello">
lorem ipsum dolor sit amet.
</div>
</div>
I just integrated Nextjs SSR into my React project. Before this, my css media queries for mobile-responsiveness were working perfectly. Now, when I use Chrome's tools to view my app on a mobile screen size or even on my own device, I get the view as if it's on desktop.
It seems like the server is rendering the entire page and assuming desktop size and not re-rendering when it hits the client. If that's the case, how do I tell it the user is mobile and to use those CSS queries?
Here are my media queries that don't seem to be working. I'm not using CSS in JS, maybe I should be? I'm using regular css files for each component.
.Footer {
width: var(--webMaxContentWidth);
height: 200px;
background: #368efb;
display: flex;
flex-direction: column;
justify-content: center;
}
#media (max-width: 768px) {
.Footer {
width: 100%;
height: 400px;
margin: 0 20px;
}
}
Any help is appreciated!
Before, React was automatically inserting the following in the <head> of your SPA:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Once you moved to SSR, the responsibility moved to the developer to add this bit themselves. Without it, you'd have some very unexpected behavior when it came to #media query breakpoints. As you discovered after resolving your issue, this has been solved already.
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
##media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important to your style property's value.
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
Hopefully my title isn't too confusing. Anyways, I'm still learning CSS and right now I'm in the process of creating a mobile version of my company's site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is
.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/
Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?
You can create your stylesheets with media attributes, like so:
<link rel="stylesheet" media="screen" ... etc./>
The fragment above references a normal browser window.
Here's where you can find out about those: http://www.w3.org/TR/CSS21/media.html
I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:
Base: Styles common to both.
Regular: Styles only for the main site.
Mobile: Styles only for the mobile site.
Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.
You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.
You have to provide two different style sheet files and import them specifying a media type
<link rel="stylesheet" href="/all.css">
<link rel="stylesheet" media="screen" href="/computers.css">
<link rel="stylesheet" media="handheld" href="/mobile.css">
Alternatively you can use just one css file, in this way
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
In your specific problem, you could just add #media screen at the beginning of the .nav definitions.
#media screen {
.nav { /*styles*/ }
.nav ul { /*more styles*/ }}
.nav li { /*more <s>beer</s> styles*/}
}