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;
}
}
Related
I'm creating an email with the below breakpoints, but I'm having some difficulties with the breakpoints.
The breakpoint below is not working on mobile, actually I used this same breakpoints for another email and it was working perfectly.
<style style="" type="text/css">
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: 0 !important;
}
p {
margin: 0 !important;
padding: 0 !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
a {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
#media only screen and (max-width: 4ii80px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (max-width: 480px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 480px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (max-width: 480px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_wrapper"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
table[class="em_main_table"] {
width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_aside"] {
padding: 0 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
br[class="em_hide"],
span[class="em_hide"],
table[class="em_hide"],
td[class="em_hide"] {
display: none !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
img[class="em_full_img1"] {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_side"] {
width: 10px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_spc_20"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_gap_bottom"] {
padding-bottom: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_25"] {
height: 25px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_f11"] {
font-size: 11px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_height_35"] {
height: 20px !important;
}
}
#media only screen and (min-width: 481px) and (max-width: 599px) {
td[class="em_text"] {
font-size: 18px !important;
}
}
#media only screen and (max-width: 600px) {
.caption{
font-size: 20px !important;
color: red !important;
}
}
</style>
If you have mistakes like (max-width: 4ii80px) and certain constructions like [class="em_hide"], some email clients - particularly Gmail - will strip your entire <style> block. Use a CSS and HTML validator (there are plenty online), but ignore the warnings about deprecated code (HTML email uses a lot of deprecated code just fine).
Use https://www.caniemail.com/features/css-at-media/ to find out what you should expect.
Then also just use basic CSS selectors like .em_hide instead of [class="em_hide"].
I would also wrap the media queries in their own <style> block (yes you can have multiple), because some of the other things only apply to certain email clients, and Gmail doesn't like them. (For example Mso stuff only relates to Outlook desktop.)
The mistake was from the style tag
I typed instead of <style="" type="text/css">
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;
}
}
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);
}
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 don't know much about media queries, but I want to try making responsive divs.
I set div for some resolutions:
#media screen and (max-width: 768px) {
div#zarada p {
width: 100%;
font-size: 14px;
}
.zaradabox img {
display: none;
}
}
#media screen and (max-width: 1024px) {
div#zarada p {
width: 38%;
font-size: 14px;
}
}
#media screen and (max-width: 1280px) {
div#zarada p {
width: 38%;
}
}
#media screen and (max-width: 1366px) {
div#zarada p {
width: 39%;
}
}
#media screen and (max-width: 1440px) {
div#zarada p {
width: 42%;
}
}
#media screen and (max-width: 1536px) {
div#zarada p {
width: 46%;
}
}
#media screen and (max-width: 1600px) {
div#zarada p {
width: 48%;
}
}
#media screen and (max-width: 1680px) {
div#zarada p {
width: 50%;
}
}
#media screen and (max-width: 1920px) {
div#zarada p {
width: 56%;
}
}
But if display 1024x600px or ANY, always read width:56% (last style line)
What did I miss?
Essentially what your code is saying is "if it's the screen's size, do this until you reach max-width. Since your smallest value is the screen size, your last media query is overriding all of the previous ones.
If you require such specific handling of the divs, specify the min-width in the handling. e.g.
#media only screen and (max-width:768px) {
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
}
#media only screen and (min-width:769px) and (max-width:1024px) {
div#zarada p {width:38%; font-size: 14px;}
}
#media only screen and (min-width:1025px) and (max-width:1280px) {
div#zarada p {width:38% }
}
#media only screen and (min-width:1281px) and (max-width:1366px) {
div#zarada p {width:39% }
}
etc. Good luck and let me know how it works!
You should revert them (higher to lower):
#media screen and (max-width:1920px) {
div#zarada p {width:56% }
}
#media screen and (max-width:1680px) {
div#zarada p {width:50% }
}
#media screen and (max-width:1600px) {
div#zarada p {width:48% }
}
#media screen and (max-width:1536px) {
div#zarada p {width:46% }
}
#media screen and (max-width:1440px) {
div#zarada p {width:42%}
}
#media screen and (max-width:1366px) {
div#zarada p {width:39% }
}
#media screen and (max-width:1280px) {
div#zarada p {width:38% }
}
#media screen and (max-width:1024px) {
div#zarada p {width:38%; font-size: 14px;}
}
#media screen and (max-width:768px) {
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
}
Mobile First - If you do mobile first, you never need a max-width.
/* this code will be in effect unless from 0px width */
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
#media screen and (min-width:768px) {
/* this code will be in effect from 768px width and up */
div#zarada p {width:38%; font-size: 14px;}
}
#media screen and (min-width:1024px) {
/* this code will be in effect from 1024px width and up */
div#zarada p {width:38%; }
}
#media screen and (min-width:1280px) {
/* this code will be in effect from 1280px width and up */
div#zarada p {width:39%; }
}
#media screen and (min-width:1366px) {
/* this code will be in effect from 1366px width and up */
div#zarada p {width:42%;}
}
#media screen and (min-width:1440px) {
/* this code will be in effect from 1440px width and up */
div#zarada p {width:46%; }
}
#media screen and (min-width:1536px) {
/* this code will be in effect from 1536px width and up */
div#zarada p {width:48%; }
}
#media screen and (min-width:1600px) {
/* this code will be in effect from 1600px width and up */
div#zarada p {width:50%; }
}
#media screen and (min-width:1680px) {
/* this code will be in effect from 1680px width and up */
div#zarada p {width:56%; }
}
Also, You should always end you css lines with a ;. e.g. p {width:50%;}