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 */
}
Related
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.
Currently bootstrap has breakpoints for their gird system / different size screens set by size in pixels:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
However, with phones now being super high resolution and sometimes having 1080p screens, it displays the tablet or desktop layouts on some phones which is still a bit useless. Is there someway to manage this by looking at pixel density or similar?
You might look into setting Em's instead of pixel based breakpoints since ems are based on the font size, zoom and several other factors to enable the break point.
Well, ultimately, if you’re using pixels it will literally be that strict. For example, say we have a media query that is like so;
#media (max-width: 500px) {
rules here...
}
It will force that 500px as the breakpoint, regardless of the base font size or zoom level. You can imagine how this might be a problem if, for example, your user zooms to a factor of 10, the width of the browser is still going to be the determining factor as a breakpoint, so it might completely ruin your beautifully designed website.
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.
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.
I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.
So the div will expand when in landscape mode and shrink up a bit in portrait.
Any ideas?
Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).
I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.
With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles here */
}
Check out this example page for more explanation, or this one.
EDIT Just because I found this page today: Hardbroiled CSS3 Media Queries - very good writeup.
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.org this will explain how it works.
Quote from w3.org about the ‘orientation’ media feature:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A note/quote from developer.mozilla.org about the "orientation" feature:
Note: This value (ie portrait or landscape) does not correspond to actual device orientation.
Opening the soft keyboard on most devices in portrait orientation will
cause the viewport to become wider than it is tall, thereby causing
the browser to use landscape styles instead of portrait.
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
JSFIDDLE DEMO (try resizing the view port)
Here are the representative media queries affecting portrait and landscape orientation.
#media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}