i'm working with responsive design and in my css there are e.g. three different media queries with a list item style:
#media only screen and (min-width : 1350px) {
li.item:nth-child(n+6) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: red;
}
}
#media only screen and (min-width : 1550px) {
li.item:nth-child(n+7) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: green;
}
}
#media only screen and (min-width : 1750px) {
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
h1 {
color: blue;
}
}
So beginning with the 6th/7th/8th li item, i'm adding a top border. The problem is:
For 1350px i got n+6
For 1550px i got n+6
For 1750px i got n+6
When i add another earlier nth-child property, this earlier one is set for every coming nth-child for this li item.
I added for testing some more other styles, like green, blue and red headline and these styles are working.
What's the problem?
with best regards
Sebastian
=> Solution
Okay got it now with reseting previos nth-child properties like this:
li.item:nth-child(n+7) {
border-top: 0;
}
li.item:nth-child(n+8) {
border-top: 1px solid #d9ddd3;
}
You are only checking for minimum values, not maximums, therefore overlap occurs. (Your question was a little unclear, that is the problem no?) If my understanding of media queries is correct, you have no rules there that should cascade over and replace the existing rules, as I assume you intended.
Try the following conditions instead:
#media only screen and (min-width : 1350px) and (max-width : 1549px)
#media only screen and (min-width : 1550px) and (max-width : 1749px)
#media only screen and (min-width : 1750px)
Related
Recently, I find myself doing CSS in a way that I really like. Not mobile first, not desktop first. I just go and do:
Generic properties
Add stuff for different screen sizes with breakpoints that make that specific design look good
So I will do something like:
.polaroid-cards {
display: grid;
}
/* Up until 860px */
#media (max-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr;
padding: 3rem;
}
}
/* From 860px on */
#media (min-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr 1fr;
padding: 3rem 15%;
}
}
And those rules are specific for that component. Other components may break at lower sizes or break three times, whatever is needed to make them look good.
Yeah well that was to give some context.
But the question I have is, regarding:
#media (max-width: 860px) { ...
#media (min-width: 860px) { ...
Is that okay?
Should it be?
#media (max-width: 859px) { ...
#media (min-width: 860px) { ...
I of course tested both versions and both work fine (apparently), but I want to understand the math behind this, and what internal rules the browser is applying, so I "help the browser" or at least don't cause unexpected bugs.
min- and max-width are both inclusive, i.e. min-width: 860px means any screen that is 860px wide or wider. This means that
#media (max-width: 860px) { ...
#media (min-width: 860px) { ...
do overlap and the usual css precedence rules determine which to choose at a screen of width 860px exactly. So if you want to be absolutely, totally sure which rule will apply when, one should use 859px (or 861px).
Luckily, the Media Queries Level 4 spec, which is beginning to roll out to browsers, enables using regular comparison operators, making this cleaner and more obvious. You can then write
#media (width < 860px) { ...
#media (width >= 860px) { ...
And for three breakpoints, you can even do
#media (width < 860px) { ...
#media (860 <= width < 1080) { ...
#media (width >= 1080) { ...
When CSS media queries overlap, they follow the cascade rule, so in the example you shared (with some addition):
#media (max-width: 860px) { div { color: red; } }
#media (min-width: 860px) { div { color: green; } }
If the viewport is exactly 860px, both media queries will return true, which will be the equivalent of:
{ div { color: red; } }
{ div { color: green; } }
I which case, the second rule takes over
You should give 1px difference.
If you inspect the square below at 1024px, you can see that the green background overrides the red one but only because it's written after the red background, both rules are applied.
But if you check the border, only the orange one is applyed for a width >=1024px.
div{
width:50px;
height:50px;
}
#media (max-width: 1023px) {
div{
border:5px solid blue;
}
}
#media (max-width: 1024px) {
div{
background-color:red;
}
}
#media (min-width: 1024px) {
div{
background-color:green;
border:5px solid orange;
}
}
<div></div>
Also, a good way to set your media queries is to use the default css for the smallest size and set media rules with min-width like the example below :
div{
width:50px;
height:50px;
background-color:blue;
}
#media (min-width: 1024px) {
div{
background-color:orange;
}
}
#media (min-width: 1920px) {
div{
background-color:red;
}
}
<div></div>
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>
Consider the following HTML:
<div id="x">A</div>
And say I want to apply the following styling rules to it:
If the screen width is 600px or more, I want to apply a box shadow.
If the screen width is any less than 600px, I want to apply a solid border.
My intuition was to write queries like so:
#media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
#media not (min-width: 600px)
{
#x { border: solid 1px #666; }
}
<div id="x">A</div>
This works perfectly in Firefox, but in Chrome and Safari, the not query is never applied.
I can think of three other options:
#media (max-width: 599px)
This has a chance of applying neither style if the browser zoom level isn't 100%, see this GitHub issue.
#media (max-width: 600px)
This is guaranteed to apply both queries when the window width is exactly 600px.
Dumping one of the styles in the default ruleset and "undoing" everything it does manually with <attribute>: default everywhere.
This is simply not practical.
Is there any way I can accomplish the above without missing edge cases?
I feel like this would have been asked before, but you can't Google for not queries because all you'll find is "not working".
According to the MDN docs:
Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Chrome/Safari seem to like it better if you add an "all" media type after the "not"
#media (min-width: 600px)
{
#x { box-shadow: 10px 5px 5px green; }
}
#media not all and (min-width: 600px)
{
#x { border: solid 1px #666; }
}
<div id="x">A</div>
I'm VERY new to coding.
I'd like to delete the black border (screenshot attached) on the mobile site of my website. I tried this CSS code that I found online, but had no luck.
#media
(max-width: 768px) {
{
#border: 0px;
}
}
http://www.viragocreative.com/see image
Thanks!
you have added media query and it's the proper way but you didn't select a class to style, I've checked your website and in your case it will be like this:
#media (max-width: 768px) {
.row.vc_custom_1494841069452 {
border: 0 !important;
}
}
I used !important because you are using it over all your site and it's not a good practice but if you want to do what you want, just add the css above
Add the class name or add element id and remove # before border property.
#media (max-width: 768px) {
.classname {
border: 0;
}
/* or */
#elementid {
border: 0;
}
}
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>