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>
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'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
Alright, so, I'm hoping this is an easy question, but I can't for the life of me get it working.
The situation:
I've made some changes in the Additional CSS portion of the customize feature on my Wordpress theme.
I've taught myself a few things, and I was able to edit the margins and whatnot of the footer widgets.
They look great on desktop, not so much on mobile.
From research, I've found that you can call out #media criteria, theoretically making two sets of margin settings: one for a max screen size you set for mobile, and one for desktop.
Here's what I've been able to come up with:
#text-5 .widget-title{
margin:0px 0px 10px 0px}
#text-6 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .widget-title{
margin:0px 0px 10px 0px}
#custom_html-2 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .footer-row-2-widget.widget.widget_text{
width: 100px;}
#text-7 {
width: 200px;
margin:-10px 0px 5px -10px}
#text-5 {
width: 200px;
margin:-10px 0px 5px 0px}
#text-6 {
width: 300px;
margin:-10px 0px 5px -50px}
#custom_html-2 {
width: 350px;
margin:-10px 0px 5px -50px}
This seems to be working so far. (I know negative pixels is not ideal, but I can't figure out how to otherwise move the columns to where I want them.)
So, how do I call out #media in the Additional CSS? Nothing I'm finding is helping to show what needs to be done for the Additional CSS box itself, but rather for the editor files, which I don't want to touch (aka break).
Thank you!
The site in question: http://q6q.118.myftpupload.com/
You need to add the media queries to you css file. Basically they are organized for breakpoints in pixels depending of the screen size, which will apply the rules it has inside.
Here are some of the most common breakpoints (you can make your own to support as many options as your want). I hope that helps.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
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)
Can someone please explain to me how this responsive approach works? This was done using the LESS framework. How is the author achieving the desired device specific behavior?
.responsive (#scale: 1) {
/*Responsive code goes here for example*/
.logo {
padding: 44px * #scale 0 33px * #scale;
img {
width: 580px * #scale;
height: 90px * #scale;
}
}
}
.responsive;
#media screen and (min-width: 480px) and (max-width: 639px) {
.responsive(0.75);
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.responsive(0.5);
}
#media screen and (max-width: 319px) {
.responsive(0.25);
}
A quick lesson on the LESS framework first. It's basically a preprocessor of CSS that uses coding concepts to make CSS much more easy and readable to write.
The Less stylesheet translates to CSS as follows:
.logo {
padding: 44px 0 33px;
}
.logo img {
width: 580px;
height: 90px;
}
#media screen and (min-width: 480px) and (max-width: 639px) {
/*Responsive code goes here for example*/
.logo {
padding: 33px 0 24.75px;
}
.logo img {
width: 435px;
height: 67.5px;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
/*Responsive code goes here for example*/
.logo {
padding: 22px 0 16.5px;
}
.logo img {
width: 290px;
height: 45px;
}
}
#media screen and (max-width: 319px) {
/*Responsive code goes here for example*/
.logo {
padding: 11px 0 8.25px;
}
.logo img {
width: 145px;
height: 22.5px;
}
}
As you can see, there is a lot of repetition in the CSS and it is not very readable (not to speak of how much work it would be to change the aspect ratio of the logo image).
At the top of the Less code, you see this:
.responsive (#scale: 1) {
/*Responsive code goes here for example*/
.logo {
padding: 44px * #scale 0 33px * #scale;
img {
width: 580px * #scale;
height: 90px * #scale;
}
}
}
The above code is referred to as a "parametric mixin", think of these as classes in object oriented languages. You can pass in variables, set variables and rules in these "mixins". In this case, #scale is the parameter and a default value of 1 is passed in. You pretty much set rules inside the mixins, except one cool thing you can do with LESS is declare "nested" rules (which is what you see with the img selector inside the .logo selector. This is essentially the same as .logo img{/*rules*/} - which is what the resulting CSS would have. Refer to this site for a complete document on LESS: http://lesscss.org/
Now the media query aspect of it. As you can see, .responsive mixin is declared first - so think of this ruleset as the "default" viewport rules.
The first media query #media screen and (min-width: 480px) and (max-width: 639px) states that for ALL viewports that have a browser width more than 480px and less than 639px, apply whatever rules specified - in this case .responsive(0.75); (so rescaling dimensions in the mixin with 0.75 as the parameter). Therefore, when this argument is met, the cascading aspect of CSS will override the default rules set out beforehand with the rules inside the media query.
The same concept would apply for the other media queries. Just think of min-width and max-width as breakpoint setters. Wherever you see a min-width defined, the rules will be applied for all viewports that are larger than or at least that defined breakpoint. Likewise, for max-width rules are applied for all viewports that are less than the specified breakpoint. And you can combine both min-width and max-width in a media query to obtain a range of viewports to apply rules to.
For more information I suggest looking at this article http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
It's got an excellent explanation of responsive design, and how media query comes into play and designing a responsive webpage.