For some reason my media queries do not resize my site correctly when viewing from an iphone or mobile device, i get the tablet version of the site on an iphone. The media queries work fine for tablet and perfectly when shrinking a browser window.
Have I missed anything?
#media only screen and (min-width: 1024px) {
/*styling here*/
}
#media only screen and (max-width: 1023px) and (min-width: 740px) {
/*Tablet styling here*/
}
#media only screen and (max-width: 739px) and (min-width: 0px) {
/*Mobile styling here*/
}
Check Out this,
and let me know whether it is working or not
You need to specify device width.
I think you may need to specify it as 'min-device-width'.
#media only screen and (max-device-width: 739px) and (min-device-width: 0px) {
/*Mobile styling here*/
}
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 file .psd with sizes 1920X1080.
I need to make responsive website that will look good for small and big screens.
I have made from this psd html with pixel perfect technic.
I just don't understand how to make from it design for smaller screens.
Please advise.
Using CCS3 media queries! Example for Desktop first:
// Your code for Desktop devices
#media only screen and (max-width: 768px) {
// Here your code for mobile
}
or for Mobile First
// Your code for Mobile devices
#media only screen and (min-width: 768px) {
// Here your code for tablet
}
#media only screen and (min-width: 992px) {
// Here your code for Small Desktop
}
Different rules:
#media screen and (max-width: 992px) and (max-height: 700px) {
// Code
}
or:
#media screen and (max-width: 992px) and (min-height: 400px) {
// Code
}
These are only some example. You must study media queries.
I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.
For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).
You probably mean iPad Pro whose width is 1024px.
You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:
#media screen and (min-width: 1024px) and (min-height: 1320px) {
/* iPad Pro */
}
#media screen and (min-width: 1024px) and (max-height: 1310px) {
/* Laptop */
}
If the width of the screens are the same size, CSS can't distinguish them from each other I guess.
You can use JavaScript. The platform property, from the navigator object, returns a string with the platform the browser is used on. (i.e. MacIntel, Win32) (Usage: platform.navigator)
For disabling and enabling stylesheet this might work for you: http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/
for ipad specific media queries use below code,
if u want to hide img in ipad at 1024px width i.e. landscape mode u can use class "hide-me-landscape"
if u want to hide img in ipad with landscape and portrait mode use class "hide-me"
if u want to hide img in portrait mode use class "hide-me-portrait"
see below code for ex
/* Portrait and Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me{
display: none;
}
}
/* Portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-portrait{
display: none;
}
}
/* Landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
.hide-me-landscape{
display: none;
}
}
you can learn more about it here
you can also use modernizr to detect whether user is using touch screen device or not and apply your css accordingly
hope it helps :)
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 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"]