I have used 1140px CSS Grid (cssgrid.net) to code this page: http://workaday.org/dev/static/
It's restructuring all content on 750px width instead of 767px, as a result it's not working on iPad.
Can someone please suggest what i have done wrong in this?
Update:
I changed max-width to 784px, and now it's working on 767px, there is a difference of 17px. But i am not able to find reason for this so far.
You have
#media handheld, only screen and (max-width: 767px)
That is not logic to me. so you can try with variations
#media only handheld and (max-width: 767px)
or
#media handheld and (max-width: 767px)
I don't have iPad, so I can't test it.
Related
I'm optimizing my website across most popular devices using media queries in CSS file.
The problem the line below isn't working on iPads:
#media only screen and (min-device-width: 415px) and (max-device-width: 768px) {
even though iPads comes with 768px width the CSS is all messed up. Interestingly, when I use mobile device simulator in dev tools everything looks fine.
Is there some gotchas I should be aware of ?
Have you tried it so it is like this. Leave out device and just put min-width or max-width:
#media (min-width: 415px) and (max-width: 768px) { css here }
How can I provide in an Angular or any other application CSS/SCSS rules that respond to the viewport height of different devices?
The viewport width is not a problem with #media (max-width: ...) {}, but how can I react to the height here?
For example, a 13-inch Macbook, 15-inch Macbook, etc.?
Simple just like max-width eg:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
For further help
Read here
I have a confusion.
I have seen in many sites that using max-device-width is deprecated and I need to use max-width instead. So I need to hind a banner when in landscape mode and here is how I did it:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
On dev tool in chrome it works like a charm but when I tests it in real iphone I can not see it working.
So I decided to use the following:
/*landscape*/
#media screen
and (max-width: 1024px) and (orientation:landscape),
(max-device-width: 1024px) and (orientation:landscape)
{
.hide-row-on-landscape {
display:none !important;
}
}
and it worked.
Now I am confused
if max-device-width is deprecated and shouldnot be used why max-width does not work in this scenario?
Also what is the best solution for what i am trying to do?
**Update
I know there are a lot of answers supporting max-width without device but non of them explain why max-width does not support orientation. So none of them not answers my scenario: I need to use (orientation:landscape) and it seems that when it comes to this property max-width does not handle that
Hi You can simply use only this one:
#media only screen and (max-width : 1280px) {
}
it will work on all devices mobile + tabs + browsers(old, new).
why you need this (orientation:landscape)?
I have a website. The page width is perfect in 15.6 laptops.
But when it comes to larger displays, it gets ruined. Can you please help?
any #media styles to be added?
Thanks
It seems you have written that CSS specially for your screen's resolution. To fix that you need to use media queries. Example:
#media (min-width: 1280px) {
width: 1120px;
}
I checked and you have a similar problem on smaller screens. You would like to apply a mobile-first strategy, so the layout looks good on all screens. Apply the same strategy (media queries) to set diffences sizes for different resolutions. The most common solution is to use 3 breakpoints. Example:
#media (min-width: 768px) { }
#media (min-width: 1280px) { }
#media (min-width: 1440px) { }
The CSS that you write inside those media-queries will target different screen sizes, but also the CSS in the smallest media-query will work in the next ones if it is not overrriden.
Please give width by % value if you give that in px it will change for different
I'm using the below media queries for website. As and when the window is expanded and contracted, it works fine. But for mobile phone, although on chrome dev tool's cell phone simulator, the layout looks perfect. But this same media queries breaks on my actual mobile phone(despite having the same design/layout for both mobile and web). How can I make two different media queries?
#media only screen and (min-width: 10px) and (max-width: 319px) {
}
#media only screen and (min-width: 320px) {
}
#media screen and (min-width: 481px) {
}
#media screen and (min-width: 641px) {
}
#media screen and (min-width: 768px) {
}
#media screen and (min-width: 961px) {
}
edit: iphone 6.
The reason I have so many break pints is because I'm using background image. When window size is made small, the image(with no background repeat) shows blank space at the bottom. To counter that problem, had to go with many breakpoints.
Use max-width instead of min-width. Because i think all your media query represent when the screen resolution bigger than 320 678 etc and due to that only desktop query execute.