I use the following media query to apply my CSS overrides in fullscreen mode:
#media (device-width: 100vw) and (device-height: 100vh) {
.content {
padding: 0px !important;
}
}
In works perfectly in Firefox but very unreliable in Chrome (both latest versions on Windows 7 x64). I can try to apply my overrides only when not in fullscreen mode but need to invert the query. So my questions are:
Should Chrome support the query?
How do I negate it (logical not)?
p.s.
My viewport is declared like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Use new css features display-mode
#media all and (display-mode: fullscreen) {
.content {
padding: 0px;
}
}
Also avoid using !important as it's a bad practice
You can negate #media rules with not. Details on this can be found here.
It might be less elegant, but more robust, to listen to the full screen event, then perhaps add an is-fullscreen class to the body so you can write your rule like this:
body.is-fullscreen .content { padding...
For example:
document.addEventListener('fullscreenchange', function() {
document.body.classList.toggle('is-fullscreen', document.fullscreenEnabled);
});
This event has vendor-prefixed versions, so make sure you're using the one(s) you need.
Related
I have a stylesheet, which is essentially the following:
.mainwindow {
.popup {
background: black;
}
}
#media screen and (max-width: 640px){
.mainwindow {
.popup {
background: red;
}
}
}
It works perfectly in Firefox, IE and Edge, but not in Chrome, Brave or Electron.
Yes, I tried to clear the browser cache. It didn't help.
To add to the mystery, in Electron the red background flashes for a split second when starting up, then it turns to black.
Do you have this in the head
<meta name="viewport" content="width=device-width,initial-scale=1">
Otherwise if you are zoomed in that can stop responsive behaviour
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
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.
Here's the css code:
#media (max-width:600) {
body{
background-color:red;
}
}
p{
color:blue;
}
The problem is that the #media part doesn't work at all. I tested it on 3 devices (including PC) and tried to change my browser's window size. However, when I change (max-width:600) on screen, the whole thing works. What could be wrong? In addition, adding media='max-width:600' to <link> tag causes css to crash (the entire css doesn't work at all in this case) – what is this??
P.S.: the code above and adding media='....' works within codecademy.com codebit, but doesn't work on my site, where I test the whole thing. (http://peoples.pw)
You're missing the unit. I guess you're using pixels, so it'd be something like this:
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
Demo: http://jsbin.com/fovesaci/1/
Edit: About the second question, you need to place it in parentheses. So this media='max-width: 600px' should be something like this media='(max-width: 600px)'.
It's a reasonable mistake since media attr has been mostly used for print, screen or all which have no parentheses at all.
use <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> in <head> tag
and css use px in width
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
I'm facing some layout issues with a print stylesheet in webkit-based browsers, and I was wondering if there was a CSS selector, or another way to do a CSS hack to only target webkit / media print?
The classical webkit-min-device-pixel-ratio media query selector isn't working for printing.
So what's the printing equivalent to this CSS Hack? (changing the media to print, isn't working):
#media screen and (-webkit-min-device-pixel-ratio:0) {
}
You could use javascript to load CSS files for WebKit browsers only.
<head>
<link rel="stylesheet" id="hacks"/>
<script>
if(navigator.userAgent.indexOf("WebKit") != -1) {
document.getElementById("hacks").href="hacks.css";
}
</script>
</head>
You could include a stylesheet that will only be used for webkit browsers like so:
#media print and (-webkit-min-device-pixel-ratio:0) {
.black {
color:black;
}
}
There are similar features in other browsers.
Use webkit-any-link instead:
#media print
{
* > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
}
The * > /**/ selector is used to filter IE7, and can be removed if it's unsupported:
#media print
{
#foo, x:-webkit-any-link { padding-top: 200px; }
}
References
Issues for Level 4 [CSS Working Group Wiki]
CSS Selectors Level 4: The Path to CSS4
Reveal New Window Links and Links to Non HTML Files with a User Stylesheet