Use 100% div width, if 50% width is too small

Question

How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.

Answer 1

You have to use @media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:

div {
  width: 50%;
}

@media screen and (max-width: 640px) {
  div {
    width: 100%;
  }
}