Why CSS media query work in wrong manner? - html

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.

Related

CSS3 - Media Queries Not Working (Google Chrome)

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).

Media Query is not working in mobile gmail app

I am creating one html template for Gmail app. In I have added one image which should come 60% on the desktop view and 100% for mobile gmail app view.
This is img tag width 60%:
<div>
<img src="show.jpg" alt="Show your skills" class="mob-img" border="0"
style="outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;
width:60%;" />
</div>
in media query I made it 100%. But it is not working in gmail app.
#media only screen and (max-width: 600px) {
.mob-img {
width: 100% !important;
}
}
I am not getting why this is not working in gmail app. Please let me know if I am missing something.
Thanks in advance
The problem is: Gmail App isn't a "screen" media.
#media (max-width: 600px) {
.mob-img {
width: 100% !important;
}
}
This solution works for me.
EDIT: Gmail ignores other media queries. Move the media query that is relevant to Gmail App to highest point possible.
add media query <meta name="viewport" content="width=device-width, initial-scale=1.0">
i things you can try this one it's working fine https://jsfiddle.net/oa5bco0s/
add the meta on your html header
<meta name="viewport" content="width=device-width, initial-scale=1.0">

#media not working on phone but does on desktop

I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }

Internet Explorer 11 using media query css

I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.
In the head I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
In the CSS file, I have the following after all of the "full sized" css
//"full sized" css
....
#media only screen and (max-width: 479px) {
//mobile CSS
}
IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.
can you try this:
#media all and (max-width: 479px) {
//mobile CSS
}
with all you are targeting all devices, and not only the desktop version you are now targeting with screen.
For mobile only, you would do this:
#media (max-width: 600px) {
//mobile CSS
}

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.