Make this div responsive

Question

I have tried width 100% but it didn't make it responsive. Here is link of what I'm trying to make responsive. It is not responsive. Help codepen link

div {
  background:url(https://i.sstatic.net/EinaJ.png) top center;
  width:620px;
  margin:auto;
  padding:40px 40px 30px;
  height:590px;
  position:relative;
  display:flex;
  flex-flow:column;
  justify-content:center;
}
img, p, footer {  
  padding:5px;
  margin:0;
  background:pink
}
img {
  margin:auto auto 0;
}
footer {
  bottom:30px;
  right:45px;
  margin:auto 0 0;  
  border-radius:0 0 0.25em 0.25em ;
  background:rgba(0,0,0,0.2);
}

<div>
  <img src=""> 
  <p>here is</p>
  <footer>footer</footer>
</div>

Answer 1

I see what you're trying to do.You're trying to have the div in the middle center and responsive.Set margin:0 auto; and width:50%;.Get rid of other bits of codes in the div.To make it responsive to mobile screen do:

@media only screen and (max-width:set_your_max){
    div { width:50%; }
}

Answer 2

:root {
  /*the percentage of screen width occupied by a block. 1 = 100% */
  --percent: .9;
}

div {
  background: url(https://i.sstatic.net/EinaJ.png) top center;
    background-size: cover;
    /* for old browsers */
    width: 90vw;
    height: 113.61516034vw;
    /* for new browsers */
    width: calc(100vw*var(--percent));
    height: calc((100vw*var(--percent))*866/686);
    box-sizing: border-box;
  margin: auto;
  padding: 40px 40px 30px;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

img,
p,
footer {
  padding: 5px;
  margin: 0;
  /* see me */
  background: pink
}

img {
  margin: auto auto 0;
}

footer {
  bottom: 30px;
  right: 45px;
  margin: auto 0 0;
  border-radius: 0 0 0.25em 0.25em;
  /* see me */
  background: rgba(0, 0, 0, 0.2);
}

body {
  background: #777;
}

<div>
  <img src="http://lorempixel.com/200/150" />
  <p>here is</p>
  <p>some line</p>
  <p>of</p>
  <p>text</p>
  <footer>footer</footer>
</div>

Answer 3

The reason this is not responsive is because you have set the div's width and height to a specific pixel. Therefore it is not able to adjust.

Try changing the pixel to a percentage:

For example:

width: 50%;
height: 100%;