Emily Waite Emily Waite - 1 month ago 7
CSS Question

How to make a responsive div box that changes size when changing window size

So I want the width and height of my div box to grow/shrink in size when a user resizes the webpage. I want the window size and box size to change simultaneously, so the box stretches when the window stretches. Is there a way to do this solely in css?

here is what i have so far

<div id="a">
</div>


css

#a{

width: 150px;
height:200px;
border-style: solid;
border-width:7px;
float:left;
margin-left:20px;
margin-right:20px;

}


@media screen and (max-width:1500px)(max-height:3000px) {
#a {
width: 70%;
height:70%;
}

Answer

You're missing an and

@media screen and (max-width:1500px) and (max-height:3000px) {

Why would you use max-height:3000px? Think about mobile-first than.
Build your CSS starting from "minimal-or-up", in other words simply use something like:

/* Default styles +  Extrasmall devices and up!! */
#a{
  width: 70%;
  border: 7px solid #000;
}

/* Tablets and up */
@media (min-width: 768px) { 
  #a{
      width: 150px;
      /* 7px border will be inherited from extrasmall devices... etc */
  }
}

/* Desktop and up */
@media (min-width: 992px) { 
  #a{
    /* Will be 150px width. Need styles?  */
  }
}

/* Large desktops */
@media (min-width: 1200px) { 
  #a{
    /* Will be 150px width. Need styles?  */
  }
}