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) {}
Related
I've been working on making a site responsive and I only tested it by resizing my browser but when I thought I was finished, I tested it on mobile and it's not working at all. This is some examples of my media queries:
#media screen and (max-width:645px) {}
#media screen and (max-width:1366px) {}
#media screen and (max-width:1024px) {}
#media screen and (max-width:980px) {}
Instead of using max-width use max-width & min-width. This way it's gonna work finely.
#media screen and (max-width: 1366px) and (min-width: 1024px) {}
#media screen and (max-width: 1024px) and (min-width: 980px) {}
#media screen and (max-width: 980px) and (min-width: 645px) {}
#media screen and (max-width: 645px) {} This is mobile first
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
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..
What is the way to group media queries for multiple devices of different widths?
For example something like this -
#media screen and (max-width: 480px),
#media screen and (max-width: 760px),
#media screen and (max-width: 1024px)
{
}
You can use this:
#media only screen
and (max-width:480px)
and (device-aspect-ratio: 2/3)
and (device-aspect-ratio: 40/71)
and (device-aspect-ratio: 667/375)
{
}
Couldn't you just use the following?
#media screen and (max-width:480px)
and (device-aspect-ratio: 2/3)
and (device-aspect-ratio: 40/71)
and (device-aspect-ratio: 667/375)
{
}