I have a div which I'd like to remain at 960px when a browser window is scaled accordingly and up to 1100px when more screen real estate is available.
I tried using min-width:960px and max-width:1100px . All browsers seem to recognize the min-width but not the max. I actually tried it with each alone and
using max the div just became hidden.
I'm not sure if any of my other rules affect the code but this is what i have
#div {
min-width:960px;
max-width:1100px;
height:550px;
margin-top:10px;
background-image: url(../images/trans_bkg.png);
background-repeat: repeat;
position:absolute;
right:10px;
}
Hopefully you understand what I'm trying to accomplish with the code but I can provide a screenshot if that would help.
Thanks
@media (max-width: 1200px) {
div
{
width:1100px;
}
}
@media (min-width: 680px) and (max-width: 1199px) {div
{
width:1100px;
}
}