I'm stuck trying to extend a couple of media queries.
I've got one max-width based query and one min-width based one that looks like this:
#media only screen and (max-width: 600px) {
/* styling goes here */
}
#media only screen and (min-width: 600px) {
/* styling goes here */
}
I would like to extend the first query to also make it enabled on any device that recognizes itself as being in portrait orientation and likewise extend the second query to trigger when having a device that is not in portrait mode.
The second media query (the min-width based) should never apply while in portrait mode, regardless of the device width.
You can just add and (orientation:portrait) or and (orientation:landscape) to your media queries.
For example:
#media only screen and (max-width: 600px) and (orientation:portrait) {
/* styling goes here */
}
#media only screen and (min-width: 600px) and (orientation:landscape) {
/* styling goes here */
}
EDITED
Based on your JS Bin example, although I'm still not 100% sure what your issue is, you can remove the "white gap" you get by removing the (orientation: landscape) from the second query.
I suspect the first one isn't triggering in your ipad as the max-width is wrong, I believe it should be 768px for an ipad (see The Responsinator for a guide).
I think you are not looking for the AND operator, but the OR one, which in the CSS world is just a comma. Hence you can do things like:
#media only screen and (max-width: 600px),
screen and (orientation:portrait) {
/* styling goes here */
}
However, in order to achieve the result you wish you would have to invert the order of your queries so that they can cascade correctly. This is because, for example, in the iPad, even in portrait orientation you are going to have a min-width: 600px, evaluating one of the two statements to true and hence triggering the media query.
By putting the portrait media query below the landscape one, you will actually make sure that when the orientation query evaluates to TRUE you will be overriding the previous styling.
You can see a modified working version of your JSBin here:
Working example
Try this with the iPad. Though being larger than 600px in portrait mode, it will still display: small-screen.
Related
I'm having a different design on my website for mobile, tablet and desktop. I'm using mediaquery to hide/show the div. Everything working fine in portrait mode. How can I handle this in landscape mode? Mobile phones are taking up the tablet design due to increased width pixels in landscape mode.
As per the answer at: https://stackoverflow.com/a/5735636/5580153
CSS to detect screen orientation:
#media screen and (orientation:portrait) { … }
#media screen and (orientation:landscape) { … }
The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation
Further discussion of the limitations of this solution can be found here, primarily that the soft keyboard can break the layout:
CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?
You should consider factoring in a combination of min-max pixel restrictions combined with orientation, as more recent comments point out. The w3 article is still a good source of information however.
Try this, hope it will help you
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
I have almost all queries for every phone. (I think atleast)
Example Iphone 6/7/8 (375x667), but uses:
#media only screen and (max-device-width: 640px) and (min-device-width: 360px){
#sidebar {
min-width: 360px;
max-width: 360px;
margin-right: -360px !important;
}
}
My full sidebar responsive media queries:
https://jsfiddle.net/aw5ty84a/6/
Cant add all queries here.
But the problem is the phone uses too small phone resolution or iPhone 5 uses too big resolution queries.
The queries are set by min & max pixel width so the iPhone 6 for example will only pick up the first media query relevant in the code, while ignoring any after (ignoring the correct one).
There may be a way with JS to target by specific device but you can't do so with CSS since the media queries are simply based on min/max pixel width.
You would need to change your width from exact pixels to something like percentages and use a more broad based pixel range like mentioned above.
Ideally you don't want to have a single media query for each phone size. The smallest screen size existent is 320px, so that's the smallest you want.
I like to have around 4 - 6 sizes of media queries, like XL, L, M, S and XS. XL could have max-width 1200px, L max-width 940px, and so on. This will improve your organization and code readability. Each project is different though - sometimes you may not need the XL, but may need a XXS, for instance.
Take the Bootstrap approach to media queries breakpoints as an example. Note that these values are what Bootstrap uses, you can come up with yours to what is most appropriate for your project;
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
If there is a very specific scenario where you find a bug at a specific breakpoint you can add that media query, but if you're coding clean this usually will not happen.
Good luck!
Whenever I press ctrl+shift+m to enter responsive design mode in Firefox, it shows the screen dimensions in the upper left, but if I see 992px as the width here and then create this media query:
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
, the stuff that is supposed to happen at 992px actually happens at 1082px, according to Firefox. Why is this? Is there a way to get Firefox's measurements to match exactly with the results that media queries produce?
Additionally, stuff that is supposed to happen at 768px according to the media query appears to be happening at 838px.
The answer was that the amount of zoom in Firefox messes with the responsive design mode measurements. Apparently, the dimensions shown in responsive design mode aren't the virtual dimensions of the website but are instead the screen dimensions, so they don't change when Firefox is zoomed in or out.
Try this code:
#media (max-width: 992px) {
/*stuff to happen at 992px*/
body{
background: #000;
}
}
Instead of
#media (min-width: 992px) {
/*stuff to happen at 992px*/
}
In Firefox, Make Sure while testing for website responsiveness , the browser zoom setting to be 100% only. It effects the screen width shown to you in RDM (Responsive Design Mode).
I am not sure about others but i got same issue earlier.
Suppose I have
/*
css for elements section #1 in page
css for elements section #2 in page
*/
#media screen and (max-width: 960px) {
/* redefines/alters CSS for elements in section #1 in page */
}
#media screen and (max-width: 700px) {
/* redefines/alters CSS for elements in section #2 in page */
}
I have read multiple places that it is always only one media query that is matched... And therefore one can not rely on the CSS already defined for #media screen and (max-width: 960px) will be applied first before #media screen and (max-width: 700px)
However in my tests when resizing a browser window down, I can see #media screen and (max-width: 960px) being applied first. Then I size the window even smaller I can see the changes are kept/combined when #media screen and (max-width: 700px) gets applied
So my question is... Is what I am seeing pure luck and against the specification? Or am I missing something?
Your tests prove true how it should work.
In your example, when the width of the browser is less than 960px and less than 700px, both queries would be considered to be true. That is working as intended and, in fact, is how I've implemented responsive design on several sites, each query being a new breakpoint of how things degrade gracefully into a small form factor.
With media queries, source order matters.
See Logic in Media Queries
In your case, the first query will always match when width <= 960px.
If you want to exclude that css you could add a min-width value to it.
I don't think you're understanding the point of the media query itself. Your first 960 declaration says, "if your screen resolution is less than 960px then apply these styles" and then once it hits 700 it will apply those styles. That's just basic responsive design.
Main question is how to customize bootstrap responsive css? My code partly works but I can't fix this cases. It's hard to explain so for better understanding I made visualization presented on screenshots.
I posted actual cleaned template code on JSFIDDLE.
Now when width is more then 1200px columns are ok that mean they are two span6 side by side:
Between 1200px and 980px display should looks like:
Less then 979px and more then 768px on first navbar colapse I'd like to have something like that on container center:
Until next shrinkage below 768px right column has jump to new line and stay there when reducing further to 480px and below. I think that view presented below is ok for mobile devices and better looks in narrow desktops browsers with the exception that when scale both columns are not on center:
The smallest width corresponds to my expectations.
I am not sure if I understand your question correct, but you can customise the behavior by using media queries
// Landscape phones and down
#media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
#media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
#media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
#media (min-width: 1200px) { ... }
Maybe you have to overwrite some classes and ids. The responsive information can be found on git:
responsive.less
responsive-1200px-min.less
responsive-767px-max.less
responsive-768px-979px.less
responsive-navbar.less
responsive-utilities.less
Nevertheless play with these Settings only if you really have to.