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">
Related
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)
{
}
I have this simple media queries:
#media screen and (min-width: 1440px) and (max-width: 1600px) {
body {
font-size: 14px;
}
}
But this just doesn't work. My screen resolution is 1600x900, so it should work, I think. What the hell is wrong here? I put this on the end of .css file, I added
<meta name="viewport" content="width=device-width,initial-scale=1.0">
to the HTML file... I don't know what else should i do to make this working.
min-width and max-width refer to the width of the window, not of the screen. #media screen means that the styles apply to the "screen" medium (as opposed to the "print" medium for example).
To target the resolution, you can use min-resolution and max-resolution.
Problem
Css media queries are not working well in Smartphones and Phablets, but are working quite well in emulators. The problem is that the media queries are miss matching. for example my phone screen size is 320px but it applying 720px css.
Maybe
What I thing the problem arise due to absence of "(min-device-pixel-ratio : 1.5)". but i have no idea what is it and how to use it..
The Website
Hava look at the website | AtDrive.com
#media only screen and (min-width: 480px) and (max-width: 619px)
#media only screen and (min-width: 320px) and (max-width: 479px)
#media only screen and (min-width: 250px) and (max-width: 319px)
#media only screen and (max-width: 249px)
This is meta tag to your page.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Have a look some media queries
http://mediaqueri.es/
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"]