CSS Media Queries not Working when changing resolution size of browser window
css, media-queries, responsive-design
Solution
CSS is cascading. It is interpreted top to bottom. That's why your `1360px` styles override the `990px` styles. `990px` is a submatch of `1360px`, but it has the same priotity, so it goes down to last overrides first.
Reverse your order. If you use `max-width`, write top to bottom beginning with the biggest ending with the smallest.
Problem
I cant Seem to get these two queries to work together. It seems whatever I have listed to display in the 'max-width: 1360' overrides what I have to display for 990px. The media queries for the 990px wont overwrite anything that is defined in the 1360px queries. I did a work around for the footer, but I don't think that is the way the system was designed. I've done a bit of research, but I can't find anyone that is able to explain why this isn't working: ``` @media screen and (max-width: 990px) { #header {width: 990px; display: inherit;} #header_info {width: 990px;} #border_header {width:990px;} #contact_data { display: none;} #contact_data1 {width: 990px; display: inherit;} #contact_data1 img {float: left; } #contact_info {width: 990px;} #wrapper {width: 990px; float: left; } #container {width: 990px; float: left; } #left_window {width: 200px; float: left; } #left_window a {font-size:20px;} #content {width: 687px; } #right_window {display:none} #footer {display:none;} #footer_content {display:none;} #footer_container {display:none;} #footer_content_left {display:none;} #footer_content_center {display:none;} #footer_content_right {display:none;} #footer1 {width: 990px; display:inherit;} #footer_content1 {width: 990px; display:inherit;} #footer_container1 {width: 990px; display:inherit;} #footer_content_left1 {width: 150px; display:inherit;} #footer_content_center1 {width: 150px; display:inherit;} #footer_content_right1 {width: 150px; display:inherit;} #product_listing {margin-left: 55px; } #breakgarage {display: inherit;} } @media screen and (max-width: 1360px) { #footer {width: 1360px;} #footer_content {width: 1360px;} #footer_container {width: 1360px;} #footer_content_left {width:330px;} #footer_content_center {width: 330px;} #footer_content_right {width: 330px;} #header {width: 100%;} #header_info {width: 1360px;} #border_header {width:1360px;} #contact_data {width: 1360px;} #contact_data img {float: left;} .contact_data_space {padding-left: 75px;} #contact_info {width: 1360px;} #wrapper {width: 1360px;} #container {width: 1360px;} contact_info img {width: 50%} } ```