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.
Related
I added the following custom CSS to my wordpress theme to change the location of the menu on the mobile version of the site:
#media (max-width: 767px) {
.mob-nav {
top: 25% !important;
}
I then added this code to adjust the margins on the logo for the full desktop version of the website:
#media (min-width: 992px) {
.right-menu .logo img {
margin-top: -15px !important;
}
#media (min-width: 768px) {
.right-menu .logo img {
margin-bottom: -5px !important;
}
When I added the second bit of code it overwrites the CSS I added for the menu. I know they're conflicting somehow but I'm not sure how to fix it.
Thanks
Try this:
#media (max-width: 767px) .mob-nav { top: 50% !important; }
#media (min-width: 992px)
{
.right-menu .logo img
{
margin-top: -15px !important;
}
}
#media (min-width: 768px)
{ .right-menu .logo img
{
margin-top:0px !important;
margin-bottom: -5px !important;
}
}
I got it working, I change the top portion of your code to:
#media (max-width: 767px)
{
.mob-nav
{
top: 25% !important;
}
}
I guess it was missing a { before .mob-nav
Thanks for the help!
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 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;}
}
#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/
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;
}
}