Media queries not being read in chrome in mobile debugging view - google-chrome

I am experiencing very strange behavior with Chrome. It is not picking up media queries at certain sizes when it is in the mobile debugging view.
For example the following works in mobile view:
#media screen and (max-width: 980px) {
#cliff {
background-color: red; }
}
but this doesn't work
#media screen and (max-width: 979px) {
#cliff {
background-color: red; }
}
You will see the difference is only one pixel. Then if I come out of the mobile debugging view and change the screen size it works. Can anyone advise, or know of any reason that this is happening?

Do you have this in the header?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, maybe changing the format will help. This works for me:
#media (max-width:980px){
//Styles
}

Related

#media Query Working in IE, Firefox, and Edge, but not Chrome

I have created a media query to shrink a div's (#example in this case) padding if the screen width goes below a certain point. See the example below.
#media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}
This query works perfectly in IE 11, Firefox Quantum, and Edge. However, when I test it in Chrome, I get the same result as if the query wasn't even there.
After doing some research, I have added slight variations of a viewport entry in my HTML header, and at the moment my entry in <head></head> is:
<meta name="viewport" content="width=device-width" />
(I have also used "width=device-width, initial-scale=1" with no better result)
Lastly, I have also tried using #media only screen instead of #media screen, and this has not worked either.
For some final details my html file is a cshtml file if it makes a difference (this is for a webapp), and I am testing through the VS2017 Community debugger.
Thank you!
Try adding this to your CSS:
#media screen and (max-width:733px),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
{
#example
{
padding-left: 90px;
}
}
and this to the <head> section of the HTML document:
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
This code is tested and works. If it doesn't work for you, you might have problems somewhere else in your code, possibly your CSS. In that case please post a link to your site or add some more code, preferably your CSS.
Your code is missing a brace "}".
Below the correct code:
#media screen and (max-width: 733px) {
#example {
padding-left: 90px;
}
}

Only first two media queries works in CSS. Rest is being ignored

I'm sure there is a really simple solution to my problem.
I have tree media queries, but only the first two works. The 800px one is simply being ignored when viewed on phone.
div {
color: yellow;
font-size: 50px;
}
#media (max-width: 1200px) {
div {
color: red;
}
}
#media (max-width: 1000px) {
div {
color: green;
}
}
#media (max-width: 800px) {
div {
color: purple;
}
}
<div>Hello</div>
Add the meta tag to your html with initial-scale set to 1.
<meta name="viewport" content="width=device-width, initial-scale=1">
Since the code works fine in on desktop if just resizing the browser window, but does not work using chrome to emulate screen size - so this may be a problem with the emulator. You'd have to load the page onto a mobile device or try a couple different emulators to be sure.

Prevent running of mobile specific media query(landscape) on desktop view(landscape)

First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.
Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.
I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.
There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?
Please let me know if you are unable to understand.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<style>
#div-2{
display:none;
}
#media screen and(min-width:320px) and (orientation:landscape){
#div-1{
display:none;
}
#div-2{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1"><p>Orientation lock not applied.</p></div>
<div id="div-2"><p>Orientation lock applied.</p></div>
</body>
Ok i understand now replace the code hope this is useful for you:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<style>
#media screen and (min-width: 320px) and (orientation:landscape) {
#div-1 {
display: block;
}
#div-2 {
display: none;
}
}
#media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
<div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
<p>Orientation lock applied.</p>
</div>
</body>
</html>
I think there is not any strange thing.
You write this media query:
#media only screen and (min-width:320px) and (orientation:landscape) {
#div-1 {
display: none;
}
#div-2 {
display: block;
}
}
That contains desktop. So in desktop div-1 is hide and div-2 is visible.
If you want this media query works only for mobile you must use max-width
that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop.
This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:
#media only screen and (max-device-width: 320px)

Media Queries are affecting the desktop version, but not the mobile version

I have a css media query but it seems to be mixed up and I'm not sure why. It's making the desktop version look like what I want the mobile version to be, and the mobile version looks like what I want the desktop to be. Here is the css page in question:
#media (min-width: 500px;) {
body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
.navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
a:hover{color: #FFFFCC;}
a:visited{color: #FFFF1A;}
}
#media (max-width: 499px;) {
.navigation{width: 100%;}
.bio{display: none;}
}
in the HTML for the page I have this within the head tags:
<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>
What exactly am I doing wrong?
Change:
#media (min-width: 500px;) { ... }
#media (max-width: 499px;) { ... }
To:
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
you can try use '#media screen'
#media screen and (min-width:200px) and (max-width:1000px)
Removing the semi-colon should have fixed the issue
#media (min-width: 500px) { ... }
#media (max-width: 499px) { ... }
Since that is not working, try adding screen
#media screen and (min-width: 500px) { ... }
#media screen and (max-width: 499px) { ... }
If that does not resolve your issue, then add a snippet with your question
I figured it out. It turns out My browser history was really clogged and was loading an older version of the site while trying to mix it with the new CSS and things got really mixed up and weird.
Clearing my browser data fixed this problem. Thanks to all for your helpful tries!
If I understand your question correctly, and I am going out on a limb here without seeing the rest of your code, your responsive layouts are being messed up possibly due to a bad or missing declaration of viewport.
Check, replace, or add this in your head. You currently have single quotes around it
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Read more about it here
Also, build your application with a mobile-first approach
media max = 480 --> do this until
media max = 768 --> if changes required change or continue to
media max = 989 --> if changes required change or continue to
media max = 1200

Mobile Media Queries

I have a website that I need to have working on mobile devices currently it displays like the image below.
So far I have had the following ideas:
Copy the 680 lines of CSS again within the same document in between #media only screen tags.
Copy the same code into a mobile.css stylesheet and start again
"2" is my least favourite option but the most likely I am just wanting to know what your options would be?
iPhone View:
Put this in the head of your HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
It's going to take a little work but is worth it. You have to take the CSS that is too big on mobile and put them in specific media queries based on size. Let's say you want your titles to change from 80px to 40px when the screen size is less than 600px:
#media screen and (max-width: 1000px) {
.mytitle {
font-size: 80px;
}
}
#media screen and (max-width: 600px) {
.mytitle {
font-size: 40px;
}
}