I am really confused as to what the Media Query breakpoints should be. The way I am use to doing it is having one pixel less than the next break point, for instance
#media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx
#media screen and (min-width: 750px) and (max-width: 969px) {}
etc.
But some people use the exact values such as
#media screen and (max-width: 750px) {}
#media screen and (min-width: 750px) and (max-width: 970px) {}
Wouldn't the second approach break it? My understanding is the first approach is the way to go.
And what about if you do something such as
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
And I want all the mobile designs to apply to 750, but at 750 is where the tablet view starts. Same for 970. In this case would having it also one pixel less be correct? I.e max-width: 749 and max-width: 969
Yes, the first one is correct. In the second one, if the screens is exactly 750px wide, both media query sections will apply, which can cause problems.
Concerning your addition:
#media screen and (max-width: 750px) {}
#media screen and (max-width: 970px) {}
In this case the rules in the second query will overwrite those with identical CSS selectors in the first one, which will probably also cause problems.
The usual way would either be the other way round (desktop first approach), or using a mobile-first approach where you first state the general rules for mobile sizes, and then add media queries for larger sizes which overwrite the general rules. That would for example be
#media screen and (min-width: 720px) {}
#media screen and (min-width: 1280px) {}
Related
Website issue to fix:
I’m trying to figure out why some of my #media queries are overlapping. If you look at my code you can see the #media queries are labeled for each device dimension.
#media SCREEN SIZE: MASSIVE
#media SCREEN SIZE: LARGE
#media SCREEN SIZE: MEDIUM
#media SCREEN SIZE: IPAD
#media SCREEN SIZE: SMALL TABLET
The goal is to be able to change font sizes and image sizes for each unique #media / SCREEN SIZE.
Problem: For some reason when I make changes to the image sizes or text sizes on “SCREEN SIZE: MEDIUM” it also apply’s the changes to all the other #media larger screen sizes.
However, I am able to individually change the header background “#header {background:url(../img/super” for each individual #media code just fine without it erroneously changing the background on all the #media / SCREEN SIZE’s.
How can I get the css #media codes to be completely unique to it’s own #media / SCREEN SIZE without affecting the other #media / SCREEN SIZE’s?
And how can I add the final #media for the small phone size (Website currently shows all messed up on a small phone size)?
Let me know the answer. Your all the best!
If you need non-overlapping breakpoints you will have to do something like this
/*Small*/
#media (max-width: 499px) { ... }
/*Medium*/
#media (min-width: 500px) and (max-width: 999px) { ... }
/*Big*/
#media (min-width: 1000px) and (max-width: 1499px) { ... }
/*Large*/
#media (min-width: 1500px) { ... }
Below are the media queries i have figured out and i will use as default for every project that i will do.
#media only screen and (min-width : 320px) {}
#media only screen and (min-width : 480px) {}
#media only screen and (min-width : 768px) {}
#media only screen and (min-width : 992px) {}
#media only screen and (min-width : 1200px) {}
Now, the problem i am facing with them is that when i try to change something on 768 it gets changed on 320 also. I want to change for example logo if i hide it on 768 it should only be invisible on 768 only, whereas in this case i have to manually go on each and every query and make it visible.
I have tried min-width also and max-width also.
And min-width for mobile size and max-width for big sizes but with no luck.
And if i use fixed queries then also i have to write code for every query.
So, how do i make it work only for single size and does not affect the others, and most importantly not to write code for every size.
#media screen and (min-width: 480px) and (max-width: 767px) {
// applied only between 767 px and 480px
}
It will, To avoid that you need to write specific for all the resolutions below to that. For example: If you are hiding logo in 768 then it affects 480, 320,. To get rid of that you need to write in 480, that the specific logo to be visible, so that it will be reflected in 320 too.
/* #### CSS that's applied when the viewing area's width is 768px or less #### */
#media screen and (max-width: 768px){
div#logo{
display: none;
}
}
For logo to be visible in 480 and 320 try like this:
#media screen and (max-width: 480){
div#logo{
display: none;
}
}
For more info, Reference link
Best way to apply media query for same width and different heights ?
For example i have this sample code
#media screen and (max-width: 1366px), screen and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
and
#media screen and (max-width: 1366px), screen and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
The problem is, even on 1366 X 657 the article#chapterthankyou{
width:984px;
} style is applied.
How can i accurately apply height width conditions ? Thanks
You are close, but according to this article on the MDN, you are a little off with your logical operators.
For your code, try using this:
#media screen
and (max-width: 1366px)
and (max-height: 657px){
article#chapterthankyou{
width:984px;
}
}
And...
#media screen
and (max-width: 1366px)
and (max-height: 768px){
article#chapterthankyou{
width:1048px;
}
}
If this still does not work, then refer here for a list of different media queries, which you might find useful.
I would like to know the best practice for button resizing in Boostrap 3.
My code is:
Bonus
Bonus
I think this method generates too big file size if I duplicate every line. So, maybe I can override the btn-lg class in media queries. What do you think? Is there any 'official' practice?
If you'd like to eliminate duplicate markup, you could use CSS media queries instead and scale the button size accordingly..
Working demo: http://bootply.com/128288
#media (max-width: 768px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1200px) {}
Basically i am trying to block some styles for a particular width range(240px to 480px). Between this range, i do not want certain styles to get rendered.
To be more clear:
I want color:#000 for all other device widths except for the width->240px to 480px. How i can i make use of media not all queries. Hope i am clear..:(
Is this the correct syntax :
I have :
#media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {
What im trying :
#media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){
Can i combine the two :
#media not all and (min-width: 240px and max-width: 480px) {}
#media not all and (min-device-width: 240px and max-device-width: 480px) {}
Any help is appreciated
What you originally have is the correct syntax. The others are invalid.
The not in each media query negates the media query itself, so if the browser matched a certain media query, then not means it has to ignore that #media rule. If the browser doesn't match the media query, then not means it has to apply the rule.
When you combine two or more not media queries in a single rule, at least one of them has to evaluate to true (or "not false") in order to use the rule.
If you are trying to not all the tests at once, then you need to link them all using and:
#media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)
But depending on the devices you're testing with this may or may not make sense.