totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}
Related
Codepen here: https://codepen.io/codepenuserpro/pen/ExQrEbo
HTML:
<div></div>
CSS:
div
{
height:400px;
width:400px;
background-color:red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px)
{
background-color:blue;
}
Why isn't the div changing background color even when I resize the browser window to between 1068 - 1380px?
Media Query Syntax
A media query consists of a media type and it can contain one or more expressions, which resolve to either true or false.
If it resolves to true, the css code inside of it is applied.
#media not|only mediatype and (expressions) {
<stylesheet>
}
You must select the element- div in this case, inside the media query as of the following.
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color:blue;
}
}
div {
height: 400px;
width: 400px;
background-color: red;
}
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
<div></div>
You need to select the selector(div) inside media query.
try this:
#media only screen and (min-width: 1068px) and (max-width: 1380px){
div{
background-color:blue;
}
}
You didn't select the div in the second approach.
You may want to have this:
#media only screen and (min-width: 1068px) and (max-width: 1380px) {
div {
background-color: blue;
}
}
When i make the responsive of my web-site,
some media query works but the last ones don't.
/* work */
#media screen and (max-width: 1030px){
.section2 .content-card .title-card img {
max-width: 200px;
}
.section1 {
height: 1000px;
}
}
/* doesn't work */
#media screen and (max-width: 1030px){
.section2 {
padding-top: 15vh;
}
}
#media screen and (max-width: 260px){
.section2 {
padding-top: 6vh;
}
.section1 {
padding-top: 3vh;
}
}
In my code there are many more media queries but I had to remove them because of the code limits on the question.
Is there a limit to the number of media queries per file?
See attached picture. This shows that it is working.
In fact to do the responsive, I use the responsive mode with the devtools
is that why its not workingscreen shoot
I have an issue with media query. I tried to reproduce it on fiddle without success. So sorry if you have not a fiddle. As I have been searching quite a lot of time, I only expect from you to give me ideas how to resolve it.
I have those media queries
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
}
When I display my screen with a width of 782px and lower, the media query #media (min-width: 576px) is taken into account, which is not normal. Do you have an idea ?
EDIT
I think there is a problem with media queries. I tried the following
#media (min-width: 576px) {
input, textarea, .invalid-feedback {
width: 22vw;
}
body {
background-color: red !important;
}
}
#media (min-width: 768px) {
input, textarea, .invalid-feedback {
width: min(16.66vw, 200px);
}
body {
background-color: green !important;
}
}
and I can't see a background color red or green when I have a size of 779px
I have the following media queries set up in my stylesheet, cna anybody tell me why the bottom query doesn't override the first query?
#media screen only and (max-width:992px) {
.some-element {float:left;}
}
#media screen only and (max-width:768px) {
.some-element {float:none;}
}
Try #media screen instead of #media screen only. The bottom query does override the top one.
#media screen and (max-width:992px) {
.some-element {
float:left;
background-color: #f00;
}
}
#media screen and (max-width:768px) {
.some-element {
/** See how the background-color property is overriden */
background-color: #000;
color: #fff;
}
}
<div class="some-element">Hi. I am floating.</div>
<h1>I am a block element</h1>
You wrote the media query in the wrong order, the only (or 'not') should come right after the '#media'.
Like this:
#media only screen and (max-width:992px) {
.some-element {float:left;}
}
#media only screen and (max-width:768px) {
.some-element {float:none;}
}
I'm trying to have 3 different logo sizes (small, med, big) based on different screen sizes. Here's my code:
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
This works swapping from big to med, but it won't swap again from med to small. Why?
Try to use the min-width on the second media query also. Even when the screen is small the second query is true and the last css gets preference so its loading the second query image.
Make the following change.
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (min-width: 487px) and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
You can order it like this:
CSS:
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
background: blue;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
background: green;
}
}
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
background: red;
}
}
DEMO HERE
See: http://css-tricks.com/logic-in-media-queries/ under 'Overriding'.
I think what is happening is both the first and second media queries are true, so the second one is overriding the first; thus, never reaching the point to switch to small.
Solution: move the first media query to be the final one... should fix it and adjust accordingly.