I am trying media queries, but they won't work on 768px and 576px. I tried the minimum width but it also does not work.
.changing-color {
background-color: powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px) {
.changing-color {
background-color: chartreuse;
}
}
#media screen and (max-width: 1200px) {
.changing-color {
background-color: blueviolet;
}
}
#media screen and (max-width: 992px) {
.changing-color {
background-color: brown;
}
}
#media screen and (max-width: 768px) {
.changing-color {
background-color: darkorange;
}
}
#media screen and (max-width: 576px) {
.changing-color {
background-color: darkkhaki;
}
}
<div class="changing-color"></div>
Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.
This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.
.changing-color {
background-color:powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px){
.changing-color {
background-color:chartreuse;
}
}
#media screen and (max-width: 1200px){
.changing-color {
background-color:blueviolet;
}
}
#media screen and (max-width: 992px){
.changing-color {
background-color:brown;
}
}
#media screen and (max-width: 768px){
.changing-color {
background-color:darkorange;
}
}
#media screen and (max-width: 576px){
.changing-color {
background-color:darkkhaki;
}
}
<div class="thing changing-color"></div>
Have you added a viewport meta tag like this ?
<meta name="viewport" content="width=device-width,initial-scale=1">
This is needed because by default, most mobile browsers lie about their viewport width.
Reference Beginner's Guide to Media Queries
Related
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
I have several mediaqueries. It's works perfectly with the width and it's awfull with height... !!?
I put the same code but.. All the width are ok.
#media all and (max-width: 800px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 801px) and (max-width: 920px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 921px) and (max-width: 1320px)
{
.customTips
{
width: 15%;
}
}
The code with height doesnt' works correctly.
#media all and (min-height: 720px) and (max-height: 767px)
{
.customCadreFormulaire
{
height: 405px !important;
}
}
#media all and (min-height: 768px) and (max-height: 899px)
{
.customCadreFormulaire
{
height: 420px !important;
}
}
When I try this code, with a screen 1440/900, the code for media all and (min-height: 720px) and (max-height: 767px) works at place ??
I don't understand why, an idea ? Thanks..
#media only screen and (min-width: 767px) and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (min-width: 481px) and (max-width: 766px) {
html { background-color: green; }
}
#media only screen and (min-width: 321px) and (max-width: 480px) {
html { background-color: green; }
}
#media only screen and (max-width: 320px) {
html { background-color: green; }
}
html {
background-color: blue;
}
I'm using opera, 1920x1080 screen. The first #media tag works, the background changes to green when opera is at 100% zoom.
Changing zoom to 90% makes the background blue already...and it stays blue the whole time even at 10% zoom. Why is that so?
The first #media tag seems to be working, the others don't. And even so the first tag doesn't work properly (90% * 1080px > 767px; so the color should be green while at 90% zoom but it's not).
Move your single html definition to the top, you can also reduce the media queries to just use max
html {
background-color: blue;
}
#media only screen and (max-width: 2000px) {
html { background-color: green; }
}
#media only screen and (max-width: 766px) {
html { background-color: red; }
}
#media only screen and (max-width: 480px) {
html { background-color: black; }
}
#media only screen and (max-width: 320px) {
html { background-color: white; }
}
http://jsfiddle.net/Y5tLf/
In my css I have different font styles* for different devices:
e.g.
#media only screen and (min-width: 480px) and (max-width: 599px) {
t-heading {
font-size:14px;
}
}
#media only screen and (min-width: 600px) {
t-heading {
font-size:24px;
}
}
I would like to turn these into a mixin, so I can call these values inside other styles, while still keeping them responsive.
E.g.
SCSS:
.front {
background: red;
#include t-heading;
}
Outputed CSS:
.front {
background:red;
}
#media only screen and (min-width: 480px) and (max-width: 599px) {
.front {
font-size:14px;
}
}
#media only screen and (min-width: 600px) {
.front {
font-size:24px;
}
}
Is this possible in SCSS? I have tried wrapping mixins in Media queries, but it doesn't seem to work.
*I am just using font-styles as an example.
You want the mixin to contain the media queries, not the other way around:
#mixin t-heading {
#media only screen and (min-width: 480px) and (max-width: 599px) {
font-size:14px;
}
#media only screen and (min-width: 600px) {
font-size:24px;
}
}
.front {
background: red;
#include t-heading;
}
Output:
.front {
background: red;
}
#media only screen and (min-width: 480px) and (max-width: 599px) {
.front {
font-size: 14px;
}
}
#media only screen and (min-width: 600px) {
.front {
font-size: 24px;
}
}
Ideally, you'd want to avoid calling this sort of mixin very often, since that's a lot of extra code to be generating. If the code is something you'll want to repeat, you might want to consider using #extend:
%t-heading {
#media only screen and (min-width: 480px) and (max-width: 599px) {
font-size:14px;
}
#media only screen and (min-width: 600px) {
font-size:24px;
}
}
.front {
background: red;
#extend %t-heading;
}
.back {
#extend %t-heading;
}
Output:
#media only screen and (min-width: 480px) and (max-width: 599px) {
.front, .back {
font-size: 14px;
}
}
#media only screen and (min-width: 600px) {
.front, .back {
font-size: 24px;
}
}
.front {
background: red;
}