我怎样才能让我的盒子对任何屏幕尺寸做出反应

Question

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 1

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

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

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

Answer 2

Changing width: 500px; to max-width: 500px; at .card-details will adjust the width.

If you want to adjust the height you probably will have to change height to auto or try with flexbox or media queries

Answer 3

Change width to max-width in your .card-details element.

Do

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

Instead of

.card-details {
  width: 500px;
}

Hope this helps!

Answer 4

Without any media query you have use this.

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

 <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> 

Answer 5

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

 <div class="container"> <div class="row"> <div class="col-xs-12"> <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> 

Hope this does fine. First, of all I included the row and column in the container such that it is adjusted even for extra small size screen. Secondly, You will have to remove the width and height of the card-details class.