I have been trying to make the #media work with this webpage, but have been unable to do so. I have the follow CSS and HTML code plugged in. What am I missing? When I try to resize the page the new style for the appropriate pixel does not take effect. However, the min-width: 1281px style does indeed work. The ones below it does not work
Tried on multiple different browsers, and did research online. Seems like the code is correct, not sure what am I missing.
#media (min-width: 1281px){
{CSS STYLES-1}
}
#media (min-width: 1025px) and (max-width: 1280px){
{CSS STYLES-2}
}
#media (min-width: 768px) and (max-width: 1024px) {
{CSS STYLES-3}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
{CSS STYLES-4}
}
#media (min-width: 481px) and (max-width: 767px) {
{CSS STYLES-5}
}
#media (min-width: 320px) and (max-width: 480px) {
{CSS STYLES-6}
}
<meta charset="utf-8" content="width=device-width, initial-scale=1" name="viewport">
{HTML CODE}
when the window size is decreased I would like the CSS style e to change to match accordingly. I am mainly concern about mobile devices, tablets, laptop screens, and desktop, etc
Related
I'm using multiple media queries for a website, and the largest (min-width:1201px) is the only one that is not implementing any changes. Here are the queries that I've used, typed exactly as seen in my CSS, and in this exact order:
#media only screen and (min-width: 320px) {}
#media only screen and (min-width:480px) {}
#media only screen (min-width: 768px) and (max-width: 991px) {}
#media only screen (min-width: 992px) and (max-width: 1200px) {}
#media screen (min-width: 1201px) {}
I have included the meta tag in the head of the index.html:
<meta name="viewport" content="width=device-width, initial-scale=1">
Another thing I found odd, is in the index.html I have applied media queries with different sized pictures for the background cover photo, and the one I used there with the min-width: 1200 worked.
I'm really hoping one of you could pinpoint what I'm missing.
Not all those queries are working. I think this is what you are after.
#media only screen and (min-width: 320px) and (max-width: 479px) {}
#media only screen and (min-width:480px) and (max-width: 767px) {}
#media only screen and (min-width: 768px) and (max-width: 991px) {}
#media only screen and (min-width: 992px) and (max-width: 1200px) {}
#media screen and (min-width: 1201px) {}
see it in action here: https://jsfiddle.net/e7wdmca4/1/
You are missing an "and" in the last query:
#media screen and (min-width: 1201px) {}
I am trying to implement some basic css media queries into my web app. No matter how I order the queries in the CSS document it will always use the last query.
My CSS is layout out
basic styles{
...
}
#mediaqueries{
styles{
...
}
}
I dont know if its an ordering issue but no matter how large I make the brower or testing device it will always the last query in the document.
Media Queries:
Regular CSS{
...
}
#media screen and (orientation : landscape) {
//changes background image for devices
}
#media screen and (orientation : portrait) {
//changes background image for devices
}
#media screen and (min-device-width: 240px) and (max-device-width: 320px) {
...
}
#media screen and (min-device-width: 320px) and (max-device-width: 480px) {
...
}
#media screen and (min-device-width: 480px) and (max-device-width: 640px) {
...
}
#media screen and (min-device-width: 640px) and (max-device-width: 800px) {
...
}
And So on
Meta tag
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Things I have tried
#media only screen and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
And
#media all and (min-device-width: 640px) and (max-device-width: 800px)
instead of
#media screen and (min-device-width: 640px) and (max-device-width: 800px)
Any ideas? My css is 1026 lines so not practical to paste the whole document sorry
When ordering the media queries, you should make sure the max-width properties go down from the highest value, so it should be just the opposite from your provided code.
The way I usually tend to deal with Media Queries is following:
#media (min-height: 992px)
{
*css here*
}
#media (max-width: 991px)
{
*css here*
}
#media (max-width: 768px)
{
*css here*
}
#media (max-width: 499px)
{
*css here*
}
And don't get me wrong, you can combine both min and max values and it is totally correct.
I am trying to use media query on one of my website, At the beginning it was working well, But later when I finished all media query section site design is not working properly, This are the media queries I used in style.css:
#media screen and (max-width: 768px) {}
#media screen and (max-width: 375px) {}
#media screen and (max-width:1920px) {}
#media screen and (max-width:1440px) {}
In intex.html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
After adding all this only the last media query with 1440px is working. What may the possible reasons for this?
Try using media queries as under, i.e. specify exactly which media queries to apply.
#media screen and (max-width: 375px) {}
#media screen and (min-width: 376px) and (max-width: 768px) {}
#media screen and (min-width: 769px) and (max-width:1440px) {}
#media screen and (min-width: 1441px) and (max-width:1920px) {}
I would suggest to use media queries in sequence like below. It will work.
#media screen and (max-width:1440px) {}
#media screen and (max-width:1920px) {}
#media screen and (max-width: 768px) {}
#media screen and (max-width: 375px) {}
you might have missed closing some brackets {} for the media queries. Check whether u have closed all your media queries..
My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.
#media only screen and (max-width: 1024px) {
body{
background-color:#ff0000;
}
}
#media only screen and (max-width: 767px)
{
body{
background-color:#000;
}
}
#media only screen and (max-width: 479px)
{
body{
background-color:#111;
}
}
In the head of your document, make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you omit this, then many devices will scale the page to fit the viewport.
Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.
Here's an example of a viewport meta tag - this is the one I use on my own responsive website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.
Also some mobile devices will respond to the #media handheld selector.
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
#media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
#media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/
#media handheld and (max-width: 960px)
/*handheld*/
Check in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I had the same problem, but changing #media (max-width: 400px) with #media (max-device-width: 400px) worked for me, hope it helps you
Maybe you can specifiy by using
#media only screen and (min-width:768px) and (max-width: 1024px) {}
because if a screen is 200px in width it would comply to all the other rules it's not exceeding their width
Why not use Twitter Bootstrap?
http://twitter.github.com/bootstrap/
I am using this media query for target viewport max-width of 800px devices mininmum with of 400px
#media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}
And i need to change the color in the landscape orientation for this i use this code
#media screen and (orientation:landscape)
{
body {background:red;}
}
its working good in the device but the background red applies for pc browsers also how to apply background red in devices landscape orientation only?
Thank you.
You aren't choosing an element to apply the background to
#media screen and (orientation:landscape)
{background:red;}
Should be something like:
#media screen and (max-device-width: 1000px)
and (orientation:landscape){
body {
background: red;
}
}
The max-device-width should make it ignore desktops, if you don't put device in there, it will still affect desktops that have made their browser smaller.
try in this way
#media screen and (max-width: 800px)
and (min-width: 400px) {
body {
background: white;
}
}
#media screen and (max-width: 800px)
and (min-width: 400px)
and (orientation:landscape) {
body {
background: red;
}
}
or try to detect handheld-only devices looking at the min-resolution value as in http://jsbin.com/irozuf/1/edit - e.g.
#media screen and (max-width: 800px)
and (min-width: 400px)
and (min-resolution: 97dpi) /* a typical screen has 96dpi */
and (orientation:landscape) {
body {
background: red;
}
}
Looking at this list of displays by pixel density it seems that it could work fine on modern mobile devices
if you add these meta tags to head of page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so the key: "width" means same "device-width".so,
#media screen and (max-device-width: 1000px){}
is equal to
#media screen and (max-width: 1000px){}
use each one you like:
[meta tags with key "width"]
OR
[no meta tags but "device-width"]