CODEWITHSUNDEEP
htmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3584

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.

Upvotes: 1

Views: 962

Answers (5)

Alvaro
Alvaro

Reputation: 9662

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

Upvotes: 2

Achint Sharma
Achint Sharma

Reputation: 365

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

Upvotes: 0

Hitesh
Hitesh

Reputation: 372

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>

Upvotes: 0

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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!

Upvotes: 0

V&#237;ctor Bonilla
V&#237;ctor Bonilla

Reputation: 51

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

Upvotes: 0

Related Questions