I'm using Bootstrap with lots of media queries for responsive design. For a given div, I start using bootstrap's col to set width and margin:
<div class="col-xs-6 col-xs-offset-3" id="special">
But in certain cases and in certain cases only, I want to further add my own styling, as below:
#media only screen and (orientation:landscape) and (min-width : 320px) {
.special {
width:40%;
}
}
#media only screen and (orientation:landscape) and (min-width : 768px) {
.special {
width:"go back to using bootstrap col";
}
}
My problem as you can see from the above, is that as the media query builds, on the next size up, I'm not sure how to say... go back to using the bootstrap col. I tried width:auto and width:initial but those did not work
It generally a bad idea to alter dimension when you are using a grid system, because that's all grid system is build for.
Simply by reading your example is a little unclear because there are couple conditions in your code:
width > 320
width > 768
width between 320 ~ 768
orientation is landscape
orientation is not landscape
However, media query is and additional expression for your selector, it will use what you already have if YOU DO NOT SPECIFY the OTHERWISE. so for example
/* from bootstrap */
.col-xs-6 {
width: 10 % ;
}
/* your override */
#media only screen and(orientation: landscape) and(max-width: 768px) {
#special {
width: 40%;
}
}
By applying this, div will have width of 40% when device is landscape + width is less then 768px (sorry i can't tell your intention by reading your code), it use col-xs-6 or col-xs-offset-3 otherwise.
Merge them both into one media rule
#media only screen and (orientation:landscape) and (min-width : 320px) and (max-width : 768px) {
.special {
width:40%;
}
}
Like this:
#media only screen and (min-device-width: 320px) and (max-device-height: 768px) and (orientation : landscape)
Related
I am doing my first steps in repsonsive design world.
I found out that the most recommended way is to use min-width and max-width to find out the size of the display area, like this:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... } /* for smaller tablets */
#media (max-width: 500px) { ... } /* for cellphones */
The problem is that newer phones have high density screens. My phone has width of 980px. Therefore it loads wrong CSS which is meant for larger screens.
I tried out max-device-width. It takes into account logical pixels and my phone width is 393 of those. It worked. But max-device-width is deprecated so i don't want to use it.
I found some examples of min-resolution and max-resolution as well.
It is also possible to use JavaScript to determine if the browser is mobile browser, but it doesn't seem to be the correct approach.
So I got kind of confused. Please give me hints what and how should I use to determine if the site is running on a mobile device and how to load the correct CSS for it. How it has to be done in correct and reliable way?
Thank you in advance.
first at all, the way you use it, wouldnt work well. For example:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* for laptops */
if a screen has the width of 900px, then both media queries would apply. Because 900px is below 1200px and below 991px. For that specific case your media queries should be as follow:
/* for desktops */
#media only screen
and (min-width: 1367px) {
...
}
/* for laptops */
#media only screen
and (min-width: 991px)
and (max-width: 1366px) {
...
}
/* for large tablets */
#media only screen
and (min-width: 769px)
and (max-width: 990px) {
...
}
/* for smaller tablets */
#media only screen
and (min-width: 481px)
and (max-width: 768px) {
...
}
/* for cellphones */
#media only screen
and (max-width: 480px) {
...
}
as you noticed, it should contain min and max width unless its the lwoer or top end (desktop and smartphones) the smallest smartphone size is 320px btw.
Also I changed the media queries to screen only, its just good practise as you want to address screens only.
Screen size:
Notice the difference between Hardware pixels and viewport Pixels. your phone might have something above 900 hardware pixels but onyl half or a quarter of it as viewport pixels.
Hardware pixels are the pixels that a device has physically and viewport pixels the pixels which can bea dressed by css.
The reason is, that the ahdrware pixels are not actually adressable is for sharpness. besides, it owuld be nearly unreadably otehrwise.
Edit: The cheap laptops screen panels have a resolution of 1366 x 768px. so the laptop width should be also set to 1366px.
There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.
To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.
For example, to set your site to display at a minimum width of 500px on mobile, use:
<meta name="viewport" content="width=500, initial-scale=1">
To display the site at the browser's width use:
<meta name="viewport" content="width=device-width">
In addition to the MDN article, the following article may be helpful for setting display widths for tablets.
For responsive design, it's recommended to use Mobile First approach. You start with styling the mobile version and change it while the viewport grows.
With the following media queries you have different problems:
#media (max-width: 1200px) { ... } /* for desktops */
#media (max-width: 991px) { ... } /* will match laptops and desktop because your screen with is underr 991 but also under 1200px */
#media (min-width: 768px) and (max-width: 990px) { ... } /* for large tablets */
#media (max-width: 768px) { ... }
#media (max-width: 500px) { ... }
the correct approach should be
// you start with mobile version
#media (min-width: 500px) { ... } // will match only screen width >= 500px
#media (max-width: 768px) { ... } // will match only screen width >= 768px
#media (min-width: 768px) and (max-width: 990px) { ... } // will match only screen width >= 768px and < 900px (could be tablets also)
#media (min-width: 991px) { ... } // match also ipad on landscape mode
#media (min-width: 1200px) { ... } /* for desktops */
My mobile media queries dont work in landscape mode, maybe I am not displaying media only screen right. I am not using any frameworks , just regular CSS...
Could someone point me in the right direction? Thanks in advance
this is what I have right now
#media (min-width : 319px) and (max-width: 480px){
//css here
}
not sure what I am doing wrong
There is a useful attribute/function in CSS called orientation which has two options:
Landscape
Portrait
And this is how you can use it:
#media screen and (orientation:landscape) {
/* Your CSS Here*/
}
To attach the screen max and min width you can do something like this:
#media screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 480px) {
/* Your CSS Here*/
}
See this reference: css expanding based on portrait or landscape screen size? and also a documentation about the #media queries on this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices
I hope this will help you :-)
What about this combination of media-query + viewport height ?
video {
width: 100%;
}
#media screen and (orientation:landscape) {
video {
height: calc(100vh - 110px);
}
}
100vh = 100% of your viewport height.
110px is the height of my navigation bar, (just need to adapt it to your dimensions)
I have built a website siavoush-re.co.uk and have used media queries to adjust it to small screens.
I first made a default style so the website fits my 1280px screen and then used min width media queries from 240px to my regular size. So it looks something like this
default css
#media (min-width: 240px) { //style }
#media (min-width: 320px) { //style }
......
#media (min-width: 1280px) { //style }
What I wanted to know is if there is way to undo all the changes done in the previous breakpoints and have it revert to the default style once the width reaches 1280px?
Sounds like you want max-width-- 'change to this css up until this size'.
You can also combine these queries depending on your needs, for example:
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-width : 768px) and (max-width : 1024px) {
/* Styles */
}
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'm working with Media screens for the first time and They don't quite seem to be working the way they're supposed too....
#media only screen and (max-width : 320px) {
all the css stylings within here and it shows up as this as it's supposed to.
#media only screen and (max-width : 321px) {
all css stylings that i place in here don't apply to the page when the width goes beyond 321 px. which isn't supposed to happen.... for example if i were to change any text color nothing would end up changing.
thanks in advance for any help :)
The CSS you write in this media query will be applied to the screen which has width less than 321px;
#media only screen and (max-width : 321px) {
if you want to apply the same CSS when you resize it beyond 321px then you need to increase the width as per your requirements -
#media screen and (max-width: 700px){
You need to write Media Query to a class or element as -
#media screen and (max-width: 700px){
body{
font-size:20px;
color:red;
}
}
Demo Here