Serge Serge - 3 months ago 5x
CSS Question

How do I go from fixed width to percentage width in a CSS stylesheet?

I want a div to be responsive and adjust itself to 100% width of my screen if I resize my viewport to 640 pixels or less. So I wrote this CSS

div.mypanel {
position: absolute;
top: 0;
right: 0;
min-height: 100%;
width: 570px;
z-index: 3;
margin: 0;
overflow-x: hidden;
border-radius: 10px 0px 0px 10px;
border: 1px solid #00295E;
@media screen and (max-width : 640px;) { div.mypanel { width : 100%; } }

Only problem is... it doesn't seem to work unless the div.mypanel is set to a width that is a percentage, and I don't want a percentage.

Is this somehow not allowed by some obscure definition of CSS?


It's not working because you have a ; after your max-width which is not proper syntax for media queries. Remove it and it should work as expected.