I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:
body {
background-image:url(../Images/FondoSL.png);
font-family: 'Open Sans', sans-serif;
font-size:1em;
}
.headerPartOne p{
font-size:0.94em;
color:#676767;
margin-left:30px;
margin-top:5px;
margin-bottom:0;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.98em;
margin-left:35px;
}
and in the media query 320px this:
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
.headerPartOne p{
font-size:0.74em;
color:#676767;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.48em;
}
}
also i have another media query for web and mobile screen resolutions
#media only screen and (min-width: 600px) and (max-width: 800px)
#media only screen and (min-width: 533px) and (max-width: 853px)
#media only screen and (min-width:1920px)
these media queries work fine.
well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)
sorry for my english.. thanks
Lets take this one css rule as an example.
Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.
So if you have
body {
font-size: 1em;
}
on line 25 of your css style sheet.
and have
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
}
on line 114 of your css style sheet.
The font-size will be 0.7em, since it overwrote the previous style.
Lets say instead of that #media query you did this instead
#media only screen and (max-width: 320px) { /* notice the max-width instead of min-width */
body {
font-size:0.7em;
}
}
The font-size will then appear as 1em on regular screens, (any screen above 320px).
This will apply to styles below 320px
#media (max-width:320px) {
/* styles here */
}
(min-width: 320px) means every resolution greater than 320px in width.
If you want only screens of 320px or less to receive these rules, you need to use (max-width: SIZE) where SIZE is whatever the biggest screen is you want it to be applied to.
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
I have the following code :
#media (min-width: 1200px) {
.color {
color: blue;
}
}
#media (min-width: 992px) {
.color {
color: red;
}
}
#media (min-width: 768px) {
.color {
color: green;
}
}
#media (max-width: 767px) {
}
<div class="color">Wow ji</div>
No matter what the screen size, Wow ji appears in green color only. What am I doing wrong here ?
In CSS, it is the last corresponding style that is applied, so in your code, as long as the screen is at least 768px, it will appear green.
You need either to set a max-width in the first tests, or do them in the inverse order.
Because what you are saying is at 768px or higher you want .color to be green you need to swap the order of your media queries around or use max-width
You have a bad syntax and usage, it's not even the same each time.
I would recommand doing like this :
#media screen and (max-width: 768px) { // or whatever screen size
.color {
color: green;
}
}
And you better add a <meta> viewport in your HTML to make your media queries working fine.
Some docs:
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers
max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule. I have changed your code with max-width now its working fine all media queries , just resize the browser
#media ( min-width : 1200px) {
.color{
color: blue;
}
}
#media ( max-width : 992px) {
.color{
color: red;
}
}
#media(max-width:768px){
.color{
color: green;
}
}
#media(max-width:767px) {
.color{
color: yellow;
}
}
<div class="color">Wow ji</div>
If em/% values are used in an non-bootstrap layout they are responsive in bootstrap no matter what text size remains the same and when vw are used they are responsive. What is the reason for this how to make it responsive without media queries.
The .lead class from Bootstrap uses Media Queries so that depending on what the device's screen width is, the font-size property will be a different value
/*---------------------
Media Queries
---------------------*/
/* Desktops */
#media only screen and (min-width: 993px) {
.lead {
font-size: 3.5em;
}
}
/* Tablets */
#media only screen and (min-width: 769px) and (max-width: 992px) {
.lead {
font-size: 3em;
}
}
/* Smartphones Landscape & Portrait */
#media only screen and (max-width: 768px) {
.lead {
font-size: 2em;
}
}
/* Smartphones Portrait */
#media only screen and (max-width: 540px) {
.lead {
font-size: 1em;
}
}
Changing the size of fonts depending on the size of the screen, is one of the most common things that I find myself doing with Media Queries
Sorry, I understood in any given document when percentages are used they are only responsive for padding, margin and other things and text are always unresponsive and they must be changed according to media queries.
Ems are always unresponsive even with padding and margin.
Im working on a mobile first site. The media queries are set with ems like so:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
#media (min-width: 320em) {
}
#media (min-width: 600em) {
}
#media (min-width: 770em) {
}
I now need to add a max-width media query just below the same breakpoint as my middle media query, so that any screen size is either one or the other.
If I was working with px this would be easy:
#media (max-width: 599px) {
}
#media (min-width: 600px) {
}
Can the same be done with ems? Just to reiterate, I need it so any screen size will be in either the min or max media query. I cant have any 'no mans land' in between.
As its possible to have decimal places on ems I think the following wont work. A screen could be 599.5ems wide as so be in between the 2 media queries.
#media (max-width: 599em) {
}
#media (min-width: 600em) {
}
I've built a few sites with both min and max width media queries, and for me they've been painfully difficult to maintain and didn't actually add any value.
I like to use min-width queries for mobile-first sites, because it makes sense to me to think about my design from my smallest screen width first and then slowly add or change features as the width increases. This has the added bonus of eliminating the "no man's land" issue. See example: (thanks #IMI for calculating the pixel widths)
When you build a site like this, you end up specifying everything that changes from the previous query in each subsequent query, but behavior is also much more predictable as your screen will either fall into one category or the other, and whichever one it falls in, you know exactly what properties are being applied.
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;}
}
#media (min-width: 30em) { /* = 480px */
body {color:green;}
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
Yes, you can use decimals in your em based media queries.
The em values of the media queries will be based on the Browser's "initial" font-size value. This is typically 16px. So you are usually safe calculating your em based media queries by dividing the pixel value by 16.
Example: to get the em equivalent of #media (min-width: 600px) you would divide 600px by 16 which would result in 37.5 and a media query of #media (min-width: 37.5em)
No Man's Land:
If you have to mix min-width and max-width media queries it is best to use a max-width media query that equals the min-width of your next media query as stated in #maioman's answer and that should get rid of the "no man's land" gap problem. That way, a device with a max of 600px will use all your styles up to and including the max-width:37.5em styles while devices with have a higher resolution will use the following relevant styles including the min-width:37.5em.
Snippet Example of em based media queries with decimals:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
color:black;
}
#media (min-width: 20em) { /* = 320px */
body {color:red;} /* You wont see this color since the max-width media query is overrides it */
}
#media (max-width: 37.4375em) { /* = 599px */
body {color:green;} /* Be careful where you place the max-width media query. It will override the smaller min-width if placed after. */
}
#media (max-width: 37.5em) { /* = 600px */
body {color:green;} /* As stated in #maioman's answer, using a max-width that equals the min-width of your next media query should get rid of the "no man's land" problem. */
}
#media (min-width: 37.5em) { /* = 600px */
body {color:pink;}
}
#media (min-width: 48.125em) { /* = 770px */
body {color:cyan;}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p> This is some random text.</p>
</body>
</html>
since min-width will override max-width if you do something like this you should be safe:
#media screen and (max-width: 600em) {
}
#media screen and (min-width: 600em) {
}
div {
width:5em;
height:5em;
}
#media screen and (max-width: 12em) {
div {
background:green
}
}
#media screen and (min-width: 12em) {
div {
background:red
}
}
<div>test</div>
fiddle
The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12px, 1em is equal to 12px. Ems are scalable in nature, so 2em would equal 24px, .5em would equal 6px, etc.
The size can be calculated from pixels to em using this formula: pixels/12(current font-size)=em
Check out http://www.w3schools.com/css/css_font.asp
In media queries “rem” as well as “em” don’t refer to the root element (html) but to the browser defaults directly which can only be changed using the browser settings for base font size. This means that even if you specify a font size of 30px on your html element, media queries will still use "user agent's (browser's) initial font-size" as “em” / “rem” based for the media queries unless you also change your default font size in the browser settings.
I will use(for the good of math):
"user agent's initial font-size" = 10px;
So let say you have:
#media (max-width: 59em) {
}
#media (min-width: 60em) {
}
When the browser compute the em that will be equal to:
#media (max-width: 590px) { // 59 * 10(supposed font-size)
}
#media (min-width: 600px) { // 60 * 10(supposed font-size)
}
Here you have a range of 10px where the screen could between the 2 media queries.
Probably you would say, I do a little math and solve the problem but to do math in css there is calc
like this:
#media (max-width: calc(60em - 1px);) { // 60 * 10 = 600px - 1px = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
But unfortunately calc() not working within media queries.
But 1px = 0.1em 1 / 10(supposed font-size)
So you have to do the math a priori:
#media (max-width: calc(59.9em);) { // 60em - 0.1em(1px) = 59.9 * 10 = 599px
}
#media (min-width: 60em) { // 60 * 10 = 600px
}
So the only that you have to do is change the "10" to the "user agent's (browser's) initial font-size" and do the math a priori.
I hope this help you.
Here's my code:
#media (max-width: 480px) {
.content {padding:4px;}
}
#media (min-width:481px){
.content {padding:10px;}
}
It works properly. But, it doesn't work as I intend when I change it like the below:
#media (max-width: 480px) {
.content {padding:4px;}
}
.content {padding:10px;}
I intended to make ".content {padding:10px}" a default style. Only screen width less than equal to 480px uses ".content {padding:4px}".
With the default style last as in your example, it will override anything that has already been set. CSS is processed from top to bottom and any properties specified more than once will take the last specified value.
Therefore, put the default style first. This way if the #media query matches, it will override the already-set default style of 10px.
.content {padding:10px;}
#media (max-width: 480px) {
.content {padding:4px;}
}