Not sure how to combine two media queries where one is conditional.
As I am doing it now, I have an entire block of styles duplicated.
The intent:
If window width < 900px
OR
if window width < 1300px ONLY WHEN html[leng="he"]
THEN
nav.main's height should be auto (and all the other styles apply too)
#media only screen and (max-width: 900px) {
nav.main {
height: auto;
}
...many more rules
}
#media only screen and (max-width: 1130px) {
html[lang="he"] {
nav.main {
height: auto;
}
...identical rules as above
}
}
Any way I can combine these so that the style block is not written twice?
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 a rule in an upper query:
#media (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
that is inherited in this media query:
#media (max-width: 767.98px) {
/*.dropdown-w:hover .dropdown-content-w {
}*/
.dblock {
display: block;
}
}
Since in a lower width media query I use 'click' to display block the element intead of hovering.
But the hover overrides the click behavior. How to cause that rule not to inherit?
As 767.98px is less than 3000px, every screen-size less than 3000px gets applied with those media-queries. Same thing is happening here. As 767.98px is less than 3000px, media-queries are applied. To not apply for screen size less than 767.98px, modify your media query
#media (min-width: 767.98px) and (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
Now, windows with screen sizes less than 767.98px won't inherit the above properties because they are simply not applied to screen sizes below 767.98px..
First example :
#media only screen and (min-width: 400px) {
body { background-color: blue; }
}
Rule will work with extensions more screen 400px.
Today met a different style to set rules :
#media only screen and (min-width: 40em) {
body { background-color: blue; }
}
What is the idea of using 40em ...? It's not even a fixed width. Under what conditions will apply this rule?
When to use this rule?
I'm trying to combine the use of a Sass variable with #media queries as follows:
$base_width:1160px;
#media screen and (max-width: 1170px) {$base_width: 960px;}
#media screen and (min-width: 1171px) {$base_width: 1160px;}
$base_width is then defined at various points in the stylesheet width percentage-based measurements to produce fluid layouts.
When I do this, the variable seems to be recognized properly but the conditions for the media query are not. For example, the above code produces an 1160px layout regardless of screen width. If I flip-flop the #media statements like so:
#media screen and (min-width: 1171px) {$base_width: 1160px;}
#media screen and (max-width: 1170px) {$base_width: 960px;}
It produces a 960px layout, again regardless of screen width. Also note that if I remove the first line of $base_width: 1160px; it returns an error for an undefined variable. Any ideas what I'm missing?
This is simply not possible. Since the trigger #media screen and (max-width: 1170px) happens on the client-side.
Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly.
Since it won't work automatically you could do it by hand like this:
#media screen and (max-width: 1170px)
$base_width: 960px // you need to indent it to (re)set it just within this media-query
// now you copy all the css rules/properties that contain or are relative to $base_width e.g.
#wrapper
width: $base_width
...
#media screen and (min-width: 1171px)
$base_width: 1160px
#wrapper
width: $base_width
...
This is not really DRY but the best you can do.
If the changes are the same every time you could also prepare a mixin containing all the changing values, so you wouldn't need to repeat it. Additionally you can try to combine the mixin with specific changes. Like:
#media screen and (min-width: 1171px)
+base_width_changes(1160px)
#width-1171-specific-element // additional specific changes, that aren't in the mixin
display: block
And the Mixin would look like this
=base_width_changes($base_width)
#wrapper
width: $base_width
Similar to Philipp Zedler's answer, you can do it with a mixin. That lets you have everything in a single file if you want.
#mixin styling($base-width) {
// your SCSS here, e.g.
#Contents {
width: $base-width;
}
}
#media screen and (max-width: 1170px) {
#include styling($base-width: 960px);
}
#media screen and (min-width: 1171px) {
#include styling($base-width: 1160px);
}
This isn't possible with SASS, but it is possible with CSS variables (or CSS custom properties). The only drawback is browser support – but there's actually a PostCSS plugin - postcss-css-variables - that "flattens" the use of CSS variables (which gives you support for older browsers, too).
The following example works great with SASS (and with postcss-css-variables you get support for older browsers too).
SCSS
$mq-laptop: 1440px;
$mq-desktop: 1680px;
:root {
--font-size-regular: 14px;
--gutter: 1rem;
}
// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
#media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
:root {
--font-size-regular: 16px;
--gutter: 1.5rem;
}
}
#media (min-width: $mq-desktop) {
:root {
--font-size-regular: 18px;
--gutter: 1.75rem;
}
}
.my-element {
font-size: var(--font-size-regular);
padding: 0 calc(var(--gutter) / 2);
}
This would result in the following CSS. The repetitive media queries will increase the file size, but I have found that the increase is usually negligible once the web server applies gzip (which it will usually do automatically).
CSS
.my-element {
font-size: 14px;
padding: 0 calc(1rem / 2);
}
#media (min-width: 1680px) {
.my-element {
padding: 0 calc(1.75rem / 2);
}
}
#media (min-width: 1440px) and (max-width: 1679px) {
.my-element {
padding: 0 calc(1.5rem / 2);
}
}
#media (min-width: 1680px) {
.my-element {
font-size: 18px;
}
}
#media (min-width: 1440px) and (max-width: 1679px) {
.my-element {
font-size: 16px;
}
}
Edit: Please do not use this solution. The answer by ronen is much better.
As a DRY solution, you can use the #import statement inside a media query, e.g. like this.
#media screen and (max-width: 1170px) {
$base_width: 960px;
#import "responsive_elements";
}
#media screen and (min-width: 1171px) {
$base_width: 1160px;
#import "responsive_elements";
}
You define all responsive elements in the file included using the variables defined in the media query. So, all you need to repeat is the import statement.
With #ronen's great answer and a map, there's some real power available:
#mixin styling($map) {
.myDiv {
background: map-get($map, 'foo');
font-size: map-get($map, 'bar');
}
}
#media (min-height: 500px) {
#include styling((
foo: green,
bar: 50px
));
}
#media (min-height: 1000px) {
#include styling((
foo: red,
bar: 100px
));
}
It's now possible to have lots more DRY media queries targeting .myDiv with a bunch of different values.
Map docs: https://sass-lang.com/documentation/functions/map
Example map usage: https://www.sitepoint.com/using-sass-maps/
I had the same problem.
The $menu-width variable should be 240px on the mobile view #media only screen and (max-width : 768px) and 340px on the desktop view.
So i have simply created two variables:
$menu-width: 340px;
$menu-mobile-width: 240px;
And here is how i have used it:
.menu {
width: $menu-width;
#media only screen and (max-width : 768px) {
width: $menu-mobile-width;
}
}
Two recommendations
1
Write your "default" CSS statements to be for small screens and only use media queries for larger screens. There's usually no need for a max-width media query.
Example (assuming the element has class "container")
#mixin min-width($width) {
#media screen and (max-width: $width) {
#content;
}
}
.container {
width: 960px;
#include min-width(1170px) {
width: 1160px;
}
}
2 Use CSS variables to solve the problem, if you can.
#mixin min-width($width) {
#media screen and (max-width: $width) {
#content;
}
}
:root {
--container-width: 960px;
#include min-width(1170px) {
--container-width: 1160px;
}
}
.container {
width: var(--container-width);
}
Note:
Since it will have the width of 1160px when the window has a width of 1170px, it may be better to use a width of 100% and max-width of 1160px, and the parent element might have a horizontal padding of 5px, as long as the box-sizing property is set to border-box. There are a lot of ways to solve the problem. If the parent is not a flex or grid container you might use .container { margin: auto }.
This is also possible with %placeholders.
%placeholders can be wrapped in media queries. So you could set up multiple variables to use at different screen sizes, and then the placeholders would automagically pre-process accordingly. I'm using some mixins to shorten my media query declarations here also.
In your _vars.scss file:
$width-1: 960px;
$width-2: 1160px;
In your _placeholders.scss file:
%variable-site-width {
#media screen and (max-width: 1170px) { width: $width-1; }
#media screen and (min-width: 1171px) { width: $width-2; }
}
In your page.scss file:
.wrapper. { #extend %variable-site-width; background: red; etc... }
And this will compile to something similar to:
#media screen and (max-width: 1170px) {
.wrapper { width: 960px; }
}
#media screen and (min-width: 1171px) {
.wrapper { width: 1160px; }
}
Voila!
I use this technique extensively for things like variable font sizes and a raft of other things.
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}