CSS3 - Media Queries Not Working (Google Chrome) - html

I have been trying to change the background color of my webpage if the screen size is lesser than 400px. However, the media queries do not seem to work at all. I have this meta tag in place;
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
The following is the media query I'm trying to work.
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
I have tried using "#media only screen" too. It still doesn't seem to affect the program in any way.
This following is a minimal, complete and verifiable example
<html>
<head>
<!-- Responsive Meta Tag -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
{{'Hello'}}
</body>
<style type="text/css">
#media screen and (max-width: 400px) {
body
{
background-color: red;
}
}
</style>
Thanks in advance

The #media query is valid and works perfectly.
If it doesn't work in your application, it means you have a stronger CSS selector overriding the selector used in the #media query. Like, for example:
body {
background-color: white !important;
}
#media screen and (max-width: 400px) {
body {
background-color: red;
}
}
#media query still works, but !important rule has higher CSS specificity and therefore applies to the element.
Very important note: #media queries do not increase specificity. They simply tell the browser to apply the rule selectively based on the given condition. But, when the condition is true, the code inside it is treated as it if wouldn't have been wrapped in the condition. So it doesn't have increased specificity.
Note Another common reason for #media queries "not applying" is when they're tested in browsers with a zoom level set at another value than 100%.
To reset the zoom level of your browser use Ctrl + 0
To see where the currently applying value for any CSS property on any element in your page comes from (what selector, what stylesheet, what line number), all you need to do is to use a browser developer console (typically opened by selecting "Inspect Element" (or similar) from the context menu, if used on the element).

Related

Why CSS media query work in wrong manner?

I'm new in CSS, especially with media queries.
I've added this to my header tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this in my body
<img id="title" class="title" src="image/ti.jpg" >
and at the end in my CSS file
#media screen and (max-width : 570px){
.title{
width: 80%;
}
}
My problem is that when I use device mode in Chrome developer tools, this code works fine, but when I change the size of explorer instead of operating in
width=570px
It happens in 160px.

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)

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

CSS media query order

I have a question about CSS media queries. My question is whether the order I have my css media queries will make a difference.
For example:
<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="desktop.css" media="">
Say I were to target desktops, laptops, and mobile devices with several media queries. Would this change how the design is displayed on multiple devices? Does the order that the links are in matter?
The short is yes it will. Quite massively.
But there is a chance that they can have a knock on effect.
As you know Cascading Style Sheets, as the name suggests, cascade through the different styles.
So for example, if you have styles in desktop.css they will roll out to all of the elements in the page.
Then laptop.css comes along and has another style that is targeted by desktop.css the style from laptop.css will take precedent. Also, applies to styles from mobile.css
Example:
//Desktop.css
body {
background: pink;
}
//laptop.css
body {
background: yellow;
}
//mobile.css
body {
background: green;
}
Without media quires it means that the background will be green.
If we do this:
//laptop.css
body {
background: yellow;
}
//mobile.css
body {
background: green;
}
//Desktop.css
body {
background: pink;
}
The background will be pink.
Place the items in the order you want them to cascade through the document. Don't place the mobile before desktop unless you want the mobile to be the default version of your site.
No and generally avoid depending only on using media types like desktop or handheld. Mobile devices are known to fake this query so they get a better stylesheet. Use the more robust media query that specifies screen resolution, pixel density etc. In your stylesheet you would do:
#media (min-width: 768px) and (max-width: 1024px) {
body {
background: #ccc;
}
}
If your queries overlap they are subject to normal cascade and can be overwritten.
Spec:
http://www.w3.org/TR/css3-mediaqueries/
Tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You should place the mediaqueries for mobile & laptop first.
Because if you use min-width:...px for example, the css will be overridden for bigger screens and will not be overridden if the screen has the min-width.
For example, your mobile.css will be used, when the min-width is 0, your laptop.css for min-width 700 and desktop.css for min-width 1000.
If you have a screen which is 800px width, the mobile.css will be used and the laptop.css too, but not the desktop.css.
If you do it the other way around, mobile.css will override everytime, because every screen has a min-width of 0px.
As the last declaration of same css will override the previous, so it should declare the superset of the style and then narrow it down.
For example,
Color is generally the same for all desktop, mobile and size of element is different.

How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.