I want to use a mediaquerie for max-width. It works fine with Chrome but in Firefox it does not, why?
jsfiddle code
CSS
.box {
width: 150px;
height: 150px;
background-color: blue;
}
#media screen and(max-width: 400px){
.box {
background-color: red;
}
}
Your syntax is wrong, you need a space between and(max-width)
See below
#media screen and (max-width: 400px){
.box {
background-color: red;
}
}
JSFIDDLE
There is no closing bracket in your above #media rule -
.box{
width: 150px;
height: 150px;
background-color: blue;
}
#media screen and (max-width: 400px){
.box{
background-color: red;
}
} /* END THIS #MEDIA RULE */
I like to do something really obvious like this to remind me ---
You don't need the "and" - or the "screen"
#media (min-width: 30em){ /* ============ */
body {
background-color: red;
}
} /* === END MEDIUM BREAK =============== */
Related
I have a class that is just numbers, so I've used the escaping methods specified by w3 which is working as desired.
However, if I wrap it in a media query, like below, it doesn't work...
#media (min-width: 1000px) {
.\33 47 {
left: -115px;
}
}
Is there a way to use CSS escaping within a media query?
It works just fine. What special character are you trying to escape?
.\26 B {
width: 50px;
height: 50px;
background-color: red;
}
#media (min-width: 500px) {
.\26 B {
background-color: blue;
}
}
<div class="&B"></div>
Number class:
.\31 3 {
width: 50px;
height: 50px;
background-color: #bada55;
}
#media (min-width: 500px) {
.\31 3 {
width: 50px;
height: 50px;
background-color: purple;
}
}
<div class="13"></div>
Note: check the snippet in full screen
If I set the browser width to 1024px the following bootstrap container rule is being applied:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
If I extend the browser width to 1092px then the following bootstrap container rule is being applied:
#media (min-width: 992px) {
.container {
width: 970px;
}
}
There are no other CSS rules applied to the container, just the standard bootstrap rules:
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Can anyone explain to me why a browser width of 1024px isn't getting the min-width: 992px rules applied to it?
I think you forget open close bracket { }
#media (min-width: 768px) {
.container {
width: 750px;
background: yellow;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
background: red;
}
}
As a test, I created 4 columns (with corresponding colors) with 25% width each. I floated them so that they will span the entirety of the page side by side.
I wanted to use media queries in order to cause there to only be two columns side by side if the viewport became small enough, and then one per line if the viewport was even smaller. I'm just doing this within one HTML document as I don't really care to create an accompanying CSS document.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media only screen and (max-width: 787px) {
.column1, .column2, .column3, .column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1, .column2, .column3, .column4 {
width: 100%;
}
}
.column1, .column2, .column3, .column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
</style>
</head>
<body>
<div class="column1">
<p>breakfast</p>
</div>
<div class="column2">
<p>lunch</p>
</div>
<div class="column3">
<p>dinner</p>
</div>
<div class="column4">
<p>snack</p>
</div>
</body>
I feel like I am doing something incredibly wrong. Thank you in advance.
media queries should be below your css styles and not above them.
check this fiddle ~ https://jsfiddle.net/g4j4ewpp/
.column1,
.column2,
.column3,
.column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
#media only screen and (max-width: 787px) {
.column1,
.column2,
.column3,
.column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1,
.column2,
.column3,
.column4 {
width: 100%;
}
}
An explanation for the answer provided by GvM -
The browser parses code top to bottom. You could have two thousand
#media only screen and (min-width: 748px){
.class {
background-color: some-color;
height: some-height;
}
}
statements. As long as they are all for the same height, the last one will take effect and all previous will be ignored.
Also, say you have three queries that set particular attributes you might want if its a medium size, and one extra if it is a large size.
#media only screen and (min-width: 320px) {
/*give a div 40px height and blue text*/
.this-div {
color: blue;
height: 40px;
background-color: lemonchiffon;
}
/*declare a div, but hide it until the screen is big enough*/
.hidden-div {
display: none;
width: 50%;
background-color: orange;
}
}
#media only screen and (min-width: 480px) {
/*style a different div to have blue text and assign it height*/
.that-div {
color: blue;
height: 30%;
background-color: magenta;
}
/*change the first div's font to red, but keep its height the same*/
.this-div {
color: red;
}
#media only screen and (min-width: 748px) {
/*change the first div's font again, and now it takes up the entire screen.*/
.this-div {
color: green;
height: 100%;
}
/*split the second div and a new third div*/
.that-div {
width: 50%;
}
.hidden-div {
display: inline;
}
}
The background colors remained the same through all media queries. But, the heights and widths may have changed depending on which query was most recently accepted - depending on the size of the viewport.
I've made a site (fairly new to html/css) and certain #media queries aren't working.
Idea being to display container1 95% of screen, on a screen less than 500px..
thanks in advance!
See code below:
#container1 {
float: left;
max-width: 45%;
min-height: 320px;
padding:20px;
margin: 1px;
border: solid #ffffff;
}
#container1:hover { border:solid #000000;
}
#container1:hover { background-color: antiquewhite;
}
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
}
}
You have max-width: 45%; set on it in a previous declaration. Change to:
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
max-width: none;
}
}
You have to overwrite the max-width too!
Otherwise
max-width: 45%;
is still active.
I'm trying to play with "Fluid Layers" and when resizing the window (manually resizing its width), I want to make: display:none on one of the Divs but it fails to do so (simply doesn't work).
Can you tell me why display:none on line 18 doesn't work?. And in addition, Should I use DIVS when i want to center 3 blocks inside a container? or you have a better idea for me?.
Would be happy to get a better / different ideas of implementing Liquid Layers if you know any. thank you for your help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #FFFFFF;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px)
{
body
{
background-color: #FFFFFF;
}
.col3 { display: none; }
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px)
{
body
{
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px)
{
body
{
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px)
{
body
{
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px)
{
body
{
background-color: lightblue;
}
}
</style>
</head>
<body>
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline- block">Text</div>
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
</div>
</body>
</html>
You used a class instead of an id as the selector.
Also i moved the common style for all the cols to the stylesheet instead of the inline style as you did.
body {
background-color: #FFFFFF;
}
#col1,
#col2,
#col3 {
width: 29%;
padding: 0;
margin-left: 3%;
margin-right: 3%;
background-color: #FFF333;
display: inline-block;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px) {
body {
background-color: #FFFFFF;
}
#col3 {
display: none;
}
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
body {
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px) {
body {
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px) {
body {
background-color: lightblue;
}
}
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1">Text</div>
<div id="col2">Text</div>
<div id="col3">Text</div>
</div>