This question already has answers here:
CSS media queries: max-width OR max-height
(5 answers)
Closed 3 years ago.
i want some features to apply to a page when for example the minimum width of the screen is 1025px and when a mobile device is rotated horizontally.
i'm tryng with this media queries, am i doing wrong?
i want some features to apply to a page when for example the minimum width of the screen is 1025px and when a mobile device is rotated horizontally.
i'm tryng with this media queries, am i doing wrong?
#media (min-width: 1025px) or (orientation: landscape) {...}
I try with orientation and have a look to following code snippet
MAIN PROBLEM IN YOUR CODE IS:
screen is missed
#media only screen and (max-width: 600px) or (orientation: portrait)
For your code, changes required are
#media screen (min-width: 1025px) or (orientation: landscape) {...}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
#media only screen and (max-width: 600px) and (orientation: portrait){
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less and orientation is portrait, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Related
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 have placed
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
in my header. I want a specific css for screen width 768px but my div with class price-tag is not taking style from
#media only screen (min-width:768px) {.price-tag{left:180px;}}
If I write
#media (min-width:768px) {.price-tag{left:180px;}}
it takes the style and applies it to all screen width. Am i doing this in wrong way ?
You need to use and.
This isn't valid:
#media only screen (min-width:768px)
It should be:
#media only screen and (min-width:768px)
Applying to 768px specifically:
If I've understood your comment correctly you'd like to apply styling to screens specifically at 768px wide. No lower; no higher. While I can't quite picture why such code would be useful or practical I can show you how to do it.
Combine min-width and max-width using the same value:
#media only screen and (min-width: 768px) and (max-width: 768px) {
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)
{
}
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"]