Can anybody tell me why exactly this works
/* small desktop */
#media all and (max-width: 1200px) {
}
/* tablet */
#media all and (max-width: 1024px) {
}
/* mobile phone */
#media all and (max-width: 768px) {
}
but this not:
/* mobile phone */
#media all and (max-width: 768px) {
}
/* tablet */
#media all and (max-width: 1024px) {
}
/* small desktop */
#media all and (max-width: 1200px) {
}
since the last style always overwrite the previous style like :
[class=foo]{
background:red;
background:yellow;
}
output:
.foo background yellow
Simply: stylesheets cascade, so if the condition is true, it will override any previous. Your second example is a mobile-first approach, so you would need to use min-width.
/* mobile phone */
#media all and (min-width: 768px) {
}
/* tablet */
#media all and (min-width: 1024px) {
}
/* small desktop */
#media all and (min-width: 1200px) {
}
Related
I made the media queries for tablet , but i can't seem to make them work for mobile.
Tablet
#media(min-width:768px) and (max-width:1024px)
Mobile
#media (min-width:480px) and (max-width:767px)
In the mobile queries when I write some changes they don't work.
You need to make sure you handle all dimensions. The way you have it now you are ignoring any sizes smaller than 480px. Please see below for some basic media sizes.
/* XL */
#media (min-width: 1200px) {
/* style */
}
/* Large */
#media (min-width: 768px) and (max-width: 979px) {
/* style */
}
/* Medium */
#media (max-width: 767px) {
/* style */
}
/* Small */
#media (max-width: 480px) {
/* style */
}
I am looking to find a way to create a sass function that alters the color of my font from white (on desktop) to black (on tablet and mobile). The reason being is that I am overlaying text on a video on desktop, but then on mobile the overlayed text switches to blocked text placed underneath the video, so the font color needs to change to black at that time.
I am relatively new to sass, but so far have tried this as a mixin (that did not work)
** I know this can be done with css but am looking to make this a bit more dynamic and reusable **
$color-media-sizes: (
"max1024": #000 or #fff,
null: #000 or #fff
);
with this function
#function color($mobile-color, $desktop-color){
#return ($mobile-color $desktop-color)
}
I don't think you really need to use SASS for this, CSS will do the trick.
Just put media queries and colors based on your device screen
(Source : https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488)
Read this doc, it'll help you to understand media queries : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
Mixin in SASS is like to create a "template" of a component. E.g. : A button
#mixin button($text, $background) {
background: $background;
border-radius: 10px;
color: $text;
padding: 0 15px;
text-decoration: none;
text-transform: uppercase;
}
// Then you can call it this way :
.success-button {
#include button("#FFF", "#0F0");
}
.error-button {
#include button("#FFF", "#F00");
}
Hope I could help
Maybe you can do that using just css media queries :
#media screen and (min-width: 980px) {
body {
color: red;
}
}
#media screen and (max-width: 979px) {
body {
color: blue;
}
}
#media screen and (max-width: 500px) {
body {
color: green;
}
}
I have structured my breakpoints like this, i need 1024 break point. i already max-width 1199 getting conflict can some one please help me out with this.
// break-point
// ------------------------------
/* Portrait phones and smaller */
#mixin bp-xsmall-only {
#media only screen and (max-width: 480px) {
#content;
}
}
/* Landscape phones and portrait tablets */
#mixin bp-small-and-below {
#media only screen and (max-width: 767px) {
#content;
}
}
/* Portrait tablets and small desktops */
#mixin bp-medium-only {
#media only screen and (min-width: 768px) and (max-width: 991px) {
#content;
}
}
/* Landscape tablets and medium desktops */
#mixin bp-large-only {
#media only screen and (min-width: 992px) and (max-width: 1199px) {
#content;
}
}
/* Large desktops and laptops */
#mixin bp-large-and-above {
#media only screen and (min-width: 992px) {
#content;
}
}
#mixin bp-xlarge-only {
#media only screen and (min-width: 1200px) {
#content;
}
}
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.