Wosley Alarico Wosley Alarico - 19 days ago 8
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?

HTML:

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


CSS:

.container{
max-width: 600px;
background-color: blue;
margin: auto;
}
.card-details{
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

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

.card-details{
  max-width: 500px;
  width: 100%;
}

https://codepen.io/anon/pen/dOXjMO

Comments