I have the following media query in a <style> block, within the <head> of my index.htm file....
#media screen and (min-width: 40.5em) {
header[role="banner"] {border:solid 1px red;}
}
But IE10 will not produce a red border around my header when the page loads. Now if I take the style out of that media query, then IE will process the red border when the page reloads.
What is the secret here in getting this displayed in IE10, with my page loads?
Also...I have the following set in my
<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>
px does not work for me either...
#media only screen and (max-device-width: 100px) {
header[role="banner"] {border:solid 1px red;}
}
no show...
UPDATE
I figured out whats going on. Within my style block I have the following css code...
#media screen and (min-width: 5em) {
//various css rules for mobile view
}
and right below it I have....
#media screen and (max-width: 40.5em) {
//various css rules for desktop view
}
Chrome understands this on my desktop browser and reads the second media query. But IE10 gets stuck on the first one. My goal is to have a mobile first approach, but not for IE to get stuck there if the screen size is larger. That is my issue...
When I remove the 1st media query, the 2nd one works in IE. How can i keep both of them and have IE know to ignore the first for larger screens...?
Set up your mobile styles first without calls to any #media queries (those will be your defaults). From there, you can use #media queries to adjust for larger/different screen resolutions.
Related
Hey everyone i'm currently struggling with media queries in my website. I need to build a website that changes certain things according to screen size of the device.
I have copied the media query from the internet and added the Meta view-port. My friend has the exact same thing and there it works fine. I've added some code as reference. This should just work right?
Could someone tell me why it doesn't?
/*Mobile media query*/
#media only screen and (max-width: 360px) {
.blue_box2{
display:none;
}
}
My HTML viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried the following?:
#media only screen and (max-width: 360px) {
.blue_box2{
display:none !important;
}
}
or this :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
My view port wouldn't work unless i put 1.0. Just wondering if the same is happening to you.
Have you got any conflicting code outside of this media query (or any inline styles in your HTML) that could cause it to function incorrectly?
The query you've shown works fine, which leads me to believe it's a problem with the code you haven't shown.
HTML
<div class="blue_box2" style="width:200px; height:200px;">
</div>
CSS
.blue_box2 { background:red; }
#media only screen and (max-width: 360px) {
.blue_box2 {
background:blue;
}
}
Just a thought:
Are you testing this using Google Chromes Developer Tools (F12), as just shrinking your browser window down normally may not reach as low as 360px.
I'm trying to set up a media query where the border changes for a specific div from right in all sizes above xs and bottom for xs. I can't however seem to get media queries to do anything at all.
I'm using Bootstrap 3 with Wordpress.
I've got this line in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
And then this in CSS:
#second-post {
color: black;
}
#media (max-width: 767px) {
#second-post {
color: red;
}
}
So the color of text should change to red by never does. I've tried changing the #media selector to (min-width: 200px) so it would activate on my desktop but still nothing.
Does anyone have an idea as to why the media query is just being totally ignored?
Check that there are no unwanted spaces in your code.
I have searched and searched and I can not seem to find a reason why my html meta tag is not working on my iPhone. You can visit my website at http://hadenhiles.mooo.com. If you resize the viewport (window) you will see that my site responds totally as expected... however when you view it on a mobile device you get a result that looks as though it is a desktop version. here is the head tag and it's contents:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
As you likely have noticed I use my own stylesheet as well as the bootstrap3 stylesheet. I know I should likely stick to one or the other when it comes to layout but I made this website using only my own media queries before I was introduced to bootstrap. I only use bootstrap in the footer and for popups/navbar features. Anyway bootstrap is not the issue. It seems as though the meta tag is not recognizing the device width and is not setting the initial scale to 1.0. I have tried varying the min-width of my queries to debug but had no success. Here is are my css media queries:
/* Main css */
#media only screen and (min-width: 1px) and (max-width: 320px){
/* content */
}
#media only screen and (min-width: 321px) and (max-width: 600px){
/* content */
}
#media only screen and (min-width: 601px) and (max-width: 768px){
/* content */
}
#media only screen and (min-width: 769px) and (max-width: 1020px){
/* content */
}
I have tried switching from #media only screen and to #media screen as someone suggested in another question but had no success either. At first I thought that the min/max width was too big/small for mobile devices so I changed that and nothing happened. I have had this problem for about 3 months now so I decided to publish my own question. Any help you can give me is much appreciated.
~Haden
So this isn't exactly defining what's going on, although I do think that it is due to min and max conflicts. Try setting only max-width since that seems to be covering everything. It seems redundant to say min-width is 1px and max width is 320px and then for the next media query to be 321px. If you set the max-width to 320px, it will cover that range. If you set the next one to 600 pixels, it will cover the 320-600 range, etc.
#media only screen and (max-width: 320px){
/* content */
}
#media only screen and (max-width: 600px){
/* content */
}
#media only screen and (max-width: 768px){
/* content */
}
#media only screen and (max-width: 1020px){
/* content */
}
Alternatively, you might try using min-device-width and max-device-width. Here's a link to a decent resource on media queries for standard devices.
This small HTML code represents my HTML5 page very clearly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pebble Go</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<style>
#media only screen and (orientation: portrait) {
html, body {
background: #222;
}
}
#media only screen and (orientation: landscape) {
html, body {
background: #000;
}
}
</style>
</body>
</html>
And so, on desktop browsers, Android tables and phones - it's working fine. But on iPad mini - it is not! … Result is - background is always gray. So my question is:
Why is this media query not working on iPad mini … ??? …
PS: I know that I have to use the max-device-width property as well, but I have a big reason not to do it! …
The requirement for this page is to be 100% wide and high, and I decided to:
Make the default CSS rules for landscape mode;
Define rules for different widths in landscape mode;
Define the portrait variants, relying basically on "orientation: portrait", and define different widths as well.
I did this! It's working! … Except the iPad mini !!! … And if I use max-device-width or something like this - then I'll be in a situation where I'll have to write different rules for landscape - different widths, portrait mode - different widths, and then mobile devices - landscape and portrait … !!! ….
The problem appeared to be caused by the clause in the meta tag for the viewport, and more specifically: "height=device-height". Removing it made everything work normal :) ...
I have a site that uses a custom font from google fonts. On my website it is aligned normally, but on my android, the source is out of alignment. Researched by various mobile tricks, and I wonder if any of them actually work, because, as tested one by one, and it did not work. What am I doing wrong?
#media screen and (max-device-width 480px)
::made-up-pseudo-element, .selector {}
#media only screen and (-webkit-min-device-pixel-ratio: 2){}
Solution
Before use this hacks, add this line in your <head> HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Major Browsers render line-height differently if not specified. Put line-height: 15px; in the body or more/less.