Wosley Alarico Wosley Alarico - 1 year ago 65
CSS Question

how can I make my box respond to any screen size

If you check my PEN I am trying to create a responsive box.

At the moment,If I scale down the page, the items will start hiding.
Is there a way I can make this green box adjust to any mobile screen size?


<div class="container">
<div class="card-details">
<div class="bo1">
<img src="" alt="VISA ICON" class="visa">
<input type="text" >
<div class="bo2">
<p class="card-number" >CARD NUMBER</p>
<input class="card-input" type="text" />
<a href="#" class="deposit-now" style="color:white" >DEPOSIT NOW</a>


max-width: 600px;
background-color: blue;
margin: auto;
position: relative;
background: green;
border-radius: 10px;
width: 500px;
height: 250px;
margin: auto;
padding: 10px;
.card-details .bo1 input{
float: right;
.card-details a.deposit-now{
position: absolute;
bottom: 0;
right: 20px;

Hope you can help.

Answer Source

Jus apply a width of 100% and a max-width of 500px:

  max-width: 500px;
  width: 100%;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download