CODEWITHSUNDEEP
cssbackgroundheader
Jonathan Grant
Jonathan Grant

Reputation: 143

Why is the background color disappearing?

Take a look at the #header container at http://granthoneymoon.com/temp.html

At the browser widths of 360 to 499 the background color of the #header disappears and I have no idea why. It's basically the same css as the other widths! It works fine in dreamweaver, but when actually viewed in a browser (IE or Firefox) the problem surfaces. Any clues as to what's going on???

@media screen and (min-width: 500px) and (max-width: 954px)  {
    #header {
    background-color: #18436C;
    min-height: 10px;
    overflow: hidden;
}
}
@media screen and (max-width: 499px) and (min-width: 360) {
#header {
    background-color: #18436C;
    width: 100%;
    min-height: 10px;
    overflow: hidden;
}
}
@media screen and (max-width: 359px) {
#header {
    background-color: #18436C;
    width: 100%;
    max-width: 360px;
    min-height: 10px;
    overflow: hidden;
}
}

Upvotes: 0

Views: 1145

Answers (1)

Shomz
Shomz

Reputation: 37701

You're missing the unit for min-width: 

@media screen and (max-width: 499px) and (min-width: 360) {

should be: 

@media screen and (max-width: 499px) and (min-width: 360px) {

Btw. why don't you separate the common values and avoid so much repetition?

#header {
    background-color: #18436C;
    min-height: 10px;
    overflow: hidden;
}

@media screen and (min-width: 500px) and (max-width: 954px)  {

}
@media screen and (max-width: 499px) and (min-width: 360px) {
#header {
    width: 100%;
}
}
@media screen and (max-width: 359px) {
#header {
    width: 100%;
    max-width: 360px;
}
}

Upvotes: 1

Related Questions