how to make container responsive when device change? - html

Question

I have created a div, and give it an initial size, css as below, I want it can responsive in different devices.
.main {
font-size: 14px;
line-height: 1.4;
font-family: museo_sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
width: 30em;
height: 40em;
background-color: tomato;
border: solid 1px black;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
demo result
What I want is make it responsive, when view in different device.
Similar as a component in Airtasker website, in the browser, it has its initial size (width and heigth) enter image description here
but when viewed on different device, or just zoom out browser, it will auto-scale to fit the screen
enter image description here
I know the solution may be very simple, but I just don't understand how to do it.

Answer 1

You can achieve it in many ways, and two most common would probably be:
setting its width to some percentage value (like 80%) and some fixed max-width value. This way it will take 80% of the screen on smaller devices, but won't be bigger than the fixed value you specified on bigger screens;
.modal {
display: block;
width: 80%;
max-width: 50rem;
height: 30rem;
background-color: lightgray;
margin: 0 auto;
}
<div class="container">
<div class="modal"></div>
</div>
using media-queries, where you will have exact control over how elements behave under certain conditions (screen size most commonly).