my question about #media code in CSS
when I create a website I use #media in media to change on many screens like this:
#media (min-width: 280px) and (max-width: 767px) {
#media (min-width: 280px) {
.main-header .main-textmonial {
font-size: 11px;
}
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
This method is correct or not?
Is there a method better than that?
For this #media query , this is the only way can be can be doing different screen size that set to specification settings by using css
It seems to be valid. I can show You how I like to handle RWD with #media
Create a mixin like so
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 70em) { #content ; }}
#else if $point == laptop {
#media (min-width: 64em) { #content ; }}
#else if $point == tablet {
#media (min-width: 50em) { #content ; }}
#else if $point == phablet {
#media (min-width: 37.5em) { #content ; }}
#else if $point == mobileonly {
#media (max-width: 37.5em) { #content ; }}
}
Use it like this
.podcasts {
margin: 1em auto;
#include breakpoint(phablet){
width: 100%;
}
}
It's just a suggestion, Maybe You'll like it :)
Yes, this is a valid method. Maybe you can also delete the duplicated check for #media (min-width: 280px), like this:
#media (min-width: 280px) and (max-width: 767px) {
.main-header .main-textmonial {
font-size: 11px;
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
But again the way you did it is valid for this #media query.
Related
I'm currently learning SASS and I've come across the '\#' symbol on a utility map example as shown below:
#each $name, $breakpoint in $breakpoints {
#media(min-width: $breakpoint) {
**.text-size-#{$size}\##{$name}** {
font-size: #{$size}px;
}
}}
which creates font-sizes for various breakpoints and compiles to something like this:
...
#media (min-width: 412px) {
.text-size-12\#small {
font-size: 12px;
}
}
#media (min-width: 768px) {
.text-size-12\#medium {
font-size: 12px;
}
}
#media (min-width: 1024px) {
.text-size-12\#large {
font-size: 12px;
}
}
...
What does the '\#' symbol translate to in this case? Am I correct in assuming these classes will be invoked as class="text-size-12 small"?
I have a _display.scss partial.
It contains #mixin and classes related to display CSS property.
_display.scss
#mixin d-block{
display: block;
}
#mixin d-none{
display: none;
}
.d-block{
#include d-block();
}
.d-none{
#include d-none();
}
I developer a #mixin generate-responsive-content that take the #content of a class and generate a different #media query for each breakpoint.
In this way:
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
// Generate all breakpoints from content
#mixin generate-responsive-content() {
// Responsive styles
// Loop over each size
#each $breakName, $width in $breakpoints {
// Check breakpoint
#if ($breakName != "") {
$breakName: '-' + $breakName;
#media (min-width: $width) {
&#{$breakName} {
#content
}
}
} #else {
#content;
}
}
}
eg. generated classes: .d-block, .d-block-xs, .d-block-sm...
But in this way, I cannot override the classes of .d-none with the classes of .d-block for each breakpoint because they have been generated before and are overwritten by those of .d-none.
I also have a class with the same name but without breakpoint variant, like d-none-lg, d-block-lg, these overwrite all others.
Check this CodePen. Here d-none variants overwrite every class of d-block.
How I can solve that?
I have created a quick demo for you - https://codepen.io/rhythm19/pen/OJVMyLa and its working as expected. I think you just need to swap the order. Generate d-none classes first and then d-block classes.
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}
Updated answer to include max-width breakpoint.
.see{outline:1px solid black;padding:1em;}
// BREAKPOINT
$breakpoints: (
"xs": 575px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px
);
#mixin d-block() {
display: block;
}
#mixin d-none() {
display: none;
}
.d-block{
#include d-block();
}
.d-none{
#include d-none();
}
// Generate all breakpoints from content
#mixin generate-responsive-content() {
// Responsive styles
// Loop over each size
#each $breakName, $width in $breakpoints {
// Check breakpoint
#if ($breakName == 'xs' ) {
$breakName: '-' + $breakName;
#media (max-width: $width) {
&#{$breakName} {
#content
}
}
}
#else if ($breakName != 'xs' ) {
$breakName: '-' + $breakName;
#media (min-width: $width) {
&#{$breakName} {
#content
}
}
} #else {
#content;
}
}
}
.d-block{
#include generate-responsive-content() {
#include d-block();
}
}
.d-none{
#include generate-responsive-content() {
#include d-none();
}
}
This is what is output:
.see {
outline: 1px solid black;
padding: 1em;
}
.d-block {
display: block;
}
.d-none {
display: none;
}
#media (max-width: 575px) {
.d-block-xs {
display: block;
}
}
#media (min-width: 576px) {
.d-block-sm {
display: block;
}
}
#media (min-width: 768px) {
.d-block-md {
display: block;
}
}
#media (min-width: 992px) {
.d-block-lg {
display: block;
}
}
#media (min-width: 1200px) {
.d-block-xl {
display: block;
}
}
#media (max-width: 575px) {
.d-none-xs {
display: none;
}
}
#media (min-width: 576px) {
.d-none-sm {
display: none;
}
}
#media (min-width: 768px) {
.d-none-md {
display: none;
}
}
#media (min-width: 992px) {
.d-none-lg {
display: none;
}
}
#media (min-width: 1200px) {
.d-none-xl {
display: none;
}
}
UPDATED CODEPEN: Here's the OPs codepen, with this update:
https://codepen.io/chrislafrombois/pen/JjdGKGJ
Here is the code from the pen:
.see {
outline: 1px solid black;
padding: 1em;
}
.d-block {
display: block;
}
.d-none {
display: none;
}
#media (max-width: 575px) {
.d-block-xs {
display: block;
}
}
#media (min-width: 576px) {
.d-block-sm {
display: block;
}
}
#media (min-width: 768px) {
.d-block-md {
display: block;
}
}
#media (min-width: 992px) {
.d-block-lg {
display: block;
}
}
#media (min-width: 1200px) {
.d-block-xl {
display: block;
}
}
#media (max-width: 575px) {
.d-none-xs {
display: none;
}
}
#media (min-width: 576px) {
.d-none-sm {
display: none;
}
}
#media (min-width: 768px) {
.d-none-md {
display: none;
}
}
#media (min-width: 992px) {
.d-none-lg {
display: none;
}
}
#media (min-width: 1200px) {
.d-none-xl {
display: none;
}
}
<div class="see">
<span>I CANNOT SEE ANYTHING BECAUSE d-none OVERWRITE EVERYTHING</span>
<div class="d-none d-none-xs d-block-sm d-block-md d-block-lg">
CHECK CSS STYLE D-BLOCK-LG OVERWRITE EVERITHING
</div>
</div>
Per our discussion, you should not try and put the default d-none and d-block into this mixin. Because of how the code will output, you should just separate that concern and place the defaults before the media query blocks.
I have the following code both in two CSS tiles with different values (using LESS).
The CSS is linked in link tag in the header. The all.css is positioned before the override.css. The problem is that when I browse the site, I can't see any changes and it only uses the code in the all.css instead of overriding it with the one in override.css.
#subheader h1 {
font-size: 3vw;
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
}
How can I make so that the rules override without using !important?
There is no problem with the LESS compilation and it results in a correct CSS file, this is why I have no idea why it's not working.
You are using completely wrong syntax of writing css #media rule. Follow this w3schools link, the correct syntax should be:
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
The correct code will be:
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
#subheader h1 {
font-size: 3vw;
}
}
#media screen and (min-width: 40em) {
#subheader h1 {
font-size: 3vw;
}
}
/* Large and up */
#media screen and (min-width: 64em) {
#subheader h1 {
font-size: 3vw;
}
}
Try this :
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
Is it ok to nest media queries inside an element? If I want to use min-width: 480px in another places there will be huge repetition. Please look at my code example. Or just use the old way? Any idea?
SASS
.navbar {
height: 500px;
width: 500px;
#media screen and (min-width: 480px) {
background-color: lightgreen;
}
}
.items {
padding: 15px;
color: red;
#media screen and (min-width: 480px) {
border: 1px solid black;
}
}
CSS
#media screen and (min-width: 480px) {
.navbar {
background-color: lightgreen;
}
.items {
border: 1px solid black;
}
}
$pc: 1024px; // PC screen size.
$tablet: 720px; // Tablet screen size.
$phone: 320px; // Phone screen size.
#mixin responsive($media) {
#if $media= phone {
#media only screen and (max-width: $tablet - 1) {
#content;
}
}
#else if $media= tablet {
#media only screen and (min-width: $tablet - 1) and (max-width: $pc) {
#content;
}
}
#else if $media= pc {
#media only screen and (min-width: $pc + 1) and (min-width: $pc) {
#content;
}
}
#else if $media= pc_tablet {
#media only screen and (min-width: $tablet - 1) {
#content;
}
}
}
Examples
body {
#include responsive(pc) {
background: red;
}
#include responsive(tablet) {
background: yellow;
}
#include responsive(phone) {
background: green;
}
}
I have viewed my page in every latest device available at the electronics shop.
I cant for the life of me get the fonts correct. Whats massive in latest samsung galaxy is tiny in latest ipad etc etc.
body {
font-size: 62.5%;
line-height: 1.45em;
}
.p {
font-size: 1.7em;
}
#media only screen and (max-width: 1280px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 1024px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 800px) {
.p {
font-size: 2em;
}
}
#media only screen and (max-width: 600px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
What the hell am I doing wrong?
Please help. Thanks
You can use Viewport to set the font size for many screen size.
here some info about it:
https://css-tricks.com/viewport-sized-typography/
Browser support list:
http://caniuse.com/#feat=viewport-units
Wild guess: .p should be p. You're selecting a class rather than an element.