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..
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 have problem with media queries (first time use).
http://swiatek.org.pl/-2/
They are working when I'm changing browser window, but when I'm looking inspect toggle device toolbar on chrome media queries doesnt work :(.
CSS: http://swiatek.org.pl/-2/main.css
replace
#media screen and (max-width: 1000px)
with
#media only screen and (max-width: 1000px)
and replace
#media screen and (max-width: 880px)
with
#media only screen and (max-width: 880px)
add the word "only" when declaring media screens.
#media only screen and (max-width: 880px) {
#first header{
font-size: 55px;
}
}
You can learn more about it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You are missing the meta tag, add this in your header.
<meta name="viewport" content="width=device-width, initial-scale=1">
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) {}
With twitter bootstrap i applied
#media only screen and (min-width : 768px){
}
but this media query is working on all other width values too, such as 992px & 1200px.
Any solution?
1)Please check whether you have included the meta tag in the head section of your HTML document as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If this line is not present then none of your media query would work.
2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.
3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)
#media (min-width:480px) {}
The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.
#media (max-width:767px){}
The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.
#media screen
This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So #media screen or #media only screen wouldn't harm your media queries much.
These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.
Change media Query to
#media screen and (min-width: 768px) and (max-width: 900px) {
}
Or any size between you want.
For more Details Refer This link.
You can use max-width. when screen regulation is maximum 992px, then it will work.
#media only screen and (max-width : 992px){
/*your styles for Tab device*/
}
You can use max-width. when screen regulation is maximum 767px, then it will work.
#media only screen and (max-width : 767px){
/*your styles for mobile device*/
}
Got it working now.
Mobile with max only then parts from to and above 1200 is reading default.
#media (max-width: 640px) {
}
#media (min-width:640px) and (max-width: 768px) {
}
#media (min-width: 768px) and (max-width:992px){
}
#media (min-width: 992px) and (max-width:1200px) {
}
i hope this may work for you
Please Define it in your style.css not in bootstrap
#media (min-width:768px)
{
}