i need to know it is possible to combine multiple device css to one class.
Normally we use like this:
*CSS side*
#media (max-width: 991px) { .padding-991 {padding-left: 300px;} }
#media (max-width: 767px) { .padding-767 {padding-left: 100px;} }
#media (max-width: 479px) { .padding-479 {padding-left: 500px;} }
*HTML side*
<div class="padding-991 padding-767 padding-479"></div>
Here example that i've testing but not work.
*CSS side*
.padding {
#media (max-width: 991px) {padding-left: 300px;}
#media (max-width: 767px) {padding-left: 100px;}
#media (max-width: 479px) {padding-left: 50px;}
}
*HTML side*
<div class="padding"></div>
So i need to know it is possible to combine multiple device css to one class.
You should like that.
#media (max-width: 991px) {
.padding {
padding-left: 300px;
}
}
#media (max-width: 767px) {
.padding {
padding-left: 100px;
}
}
#media (max-width: 479px) {
.padding {
padding-left: 50px;
}
}
Related
Using SASS, I'd like to use different variables depending on viewport width. This is what I currently do:
$color: red;
div {
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
}
p {
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
}
/*hundreds of other selectors similarly written*/
Is there a quicker/better way of doing this? For instance, something like this pseudo-code?:
#media screen and (max-width: 500px) {
$color: red;
}
#media screen and (min-width: 500px) {
$color: orange;
}
div {
background-color: $color;
}
p {
background-color: $color;
}
/*hundreds of other selectors similarly written*/
EDIT:
Just discovered this solution (1st answer). Will go for it if people can confirm it's a common/recommended one...The same solution pops up here.
You can redeclare any variable anywhere you want in their current scope. The value of the variable will then be used until it is redeclared again.
$foo: red;
body {
background-color: $foo;
#media (min-width: 600px) {
$foo: blue;
background-color: $foo;
}
#media (min-width: 1200px) {
$foo: green;
background-color: $foo;
}
}
:root {
--color: red;
}
#media (min-width: 600px) {
:root {
--color: blue;
}
}
#media (min-width: 1200px) {
:root {
--color: green;
}
}
body {
background-color: var(--color);
}
yes, mixin will do the work for you
#mixin styling($main-color) {
// your SCSS here, e.g.
div {
background-color: $main-color;
}
}
#media screen and (max-width: 500px) {
#include styling($main-color: red);
}
#media screen and (min-width: 500px) {
#include styling($main-color: orange);
}
I need to change the font-size based on the view port, for that I am using the below code; however, I feel it's a bit redundant and un-professional. I believe that it should be a better way to achieve the same result.
P.S. I am using Bootstrap 4
#media (min-width: 0px) and (max-width: 500px) {
.block {
font-size: 5.1em !important;
}
}
#media (min-width: 501px) and (max-width: 800px) {
.block {
font-size: 6.1em !important;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
.block {
font-size: 4.8em !important;
}
}
#media (min-width: 1101px) and (max-width: 1300px) {
.block {
font-size: 5.5em !important;
}
}
#media (min-width: 1301px) {
.block {
font-size: 6em !important;
}
}
Above is my CSS for my question.
Is my CSS incorrect to display just one class per screen size?
I have been doing a million different variants of this (of course, this is an exaggeration) and I keep ending up with slightly different, but incorrect results.
This time I ended up with all 3 classes showing until the screen hit 480 pixels.
Then only my .desktop class showed.
/*Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: none;
}
.mobile, .tablet {
display: block;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: none;
}
.desktop, .tablet {
display: block;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: none;
}
.mobile, .desktop {
display: block;
}
}
Here is my HTML:
<div class="mobile">
<main>
<h2> </h2>
<p> </p>
</main>
</div>
The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:
/**Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: block;
}
.mobile, .tablet {
display: none;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: block;
}
.mobile, .desktop {
display: none;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: block;
}
.desktop, .tablet {
display: none;
}
}
Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.
Hope this helps! :)
I cleaned up your example so you can make more sense out of it. It works fine just by doing this:
/*Desktop Query*/
#media only screen and (min-width: 768px) {
body {
background: black;
}
}
/*Mobile Query*/
#media only screen and (max-width: 480px) {
body {
background-color: tomato;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
body {
background: pink;
}
}
I created a class in a wordpress css file
.leftfloat{ float:left; padding-right:10px; }
I use it in the posts to wrap text around images like so:
<div class ="leftfloat" > image code or ad code </leftfloat>
It's working on PC and mobile devices. However, I want to disable this float in mobile devices. So I did this:
There is already #media defined in the template, I just added .leftfloat {float: none;}
But when I check it, it's not disabling float on mobile devices.
#media screen and (max-width: 860px) {
.leftfloat {float: none;}
}
#media screen and (max-width: 1020px) {
.leftfloat {float: none;} }
#media screen and (max-width: 767px) {
.leftfloat {float: none;}
}
#media screen and (max-width: 620px) {
.leftfloat {float: none;} }
#media screen and (max-width: 420px) {
.leftfloat {float: none;}
Your complete CSS looks like:
.leftfloat{
float:left;
padding-right:10px;
}
#media screen and (max-width: 860px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 1020px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 767px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 620px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 420px) {
.leftfloat {
float: none;
}
As it stands, mobile gets the float: left from your original class because the media queries are all max-width. To set float: none at "mobile" sizes you need to reverse everything, (eg)
.leftfloat {
float: none;
}
#media screen and (min-width: 420px) {
.leftfloat {
float: left;
}
}
You can set the property of the child in mobile to be inherit.
like this:
#media screen and (max-width: 420px) {
.leftfloat {
float: inherit;
}
I made a separate media query for each style declaration. If the media query is the same, I assume you can group all the declarations within the same media query.
How do I do that?
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block.small-image .image.left img {
width: 168px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}
The CSS Syntax is:
#media not|only mediatype and (media feature) {
CSS-Code;
}
So, You can include all your CSS Codes like this:
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
.component-text-block.small-image .image.left img {
width: 168px;
}
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}