Question: I am trying to make the box responsive to scale with the mobile but it turns out it is very small when I resize the window.

Here is the HTML code:

```
            <div class="box">
                <h1>Health Status</h1>

                    <input type="text" id="check_infected" name="infected_check" placeholder="Infected by Corona? (Yes/No)">

                    <input type="submit" onclick="UpdateHealth();" value="Update">

                <div class="bottom-text">
                    We ensure to secure your health as well as the public health
                </div>

```

Here is the CSS code:

```
.box{
    width: 30%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    text-align: center;
}

@media only screen and (min-width: 375px) and (max-width: 812px) {
    .box{    
        padding-top: 60px;
        padding-bottom: 60px;
    }

  }

```

This is the image when it is not resized:
[![enter image description here](https://i.stack.imgur.com/VquSo.png)](https://i.stack.imgur.com/VquSo.png)

It turns out very small when it is resized:

[![enter image description here](https://i.stack.imgur.com/I4JJf.png)](https://i.stack.imgur.com/I4JJf.png)

How can I make the box scale with the screen or at least make the responsive box easier to see?

Answer: 
Short answer: your image width is 30% in your CSS code. When your screen is 1000px the image is normal with 300px but when you use a mobile phone with 320px screen the image is only 96px.
In your media query, you are only defining a different `padding-top` and `padding-bottom`, but the rest of the settings stay the same as in the general CSS rule (for example `width: 30%`, which is probably the main problem). 

You need to include and change every setting which you want to change in the media query, especially `width` and the paddings, similar to this:

```
@media only screen and (min-width: 375px) and (max-width: 812px) {
  .box{   
    box-sizing: border-box; 
    width: 80%;
    padding-left: 10%
    padding-right: 10%;
    padding-top: 60px;
    padding-bottom: 60px;
  }

}

```