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) {
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">
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/
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/