html - issue in making bootstrap responsive -
hi making website responsive getting issues 1) small text "dk" , "/md" goes off screen when in mobile mode
2) .box-head not same psd have if compare attached image , code result there less space in head.
here code:
<div class="container"> <div class="row-fluid"> <div class="col-md-4"> <div class="box"> <div class="box-head"> <h3>basic</h3> <div class="line"><hr></div> <p>18 tv channels</p> <p><a href="">see list</a></p> </div> <!-- box head closed --> <div class="box-info"> <div class="content-wrapper"> <img src="card.png" alt="" class="img-responsive"> <div class="text-wrapper"> <div class="row"> <div class="col-md-8"> <h1>99</h1> </div> <div id="pack-price"> <span>dk</span> <br> <span class="md">/md</span> </div> </div> </div> </div> <div id="charges"> <p>min charge dk 1992 , -</p> <p>8 months plan</p> </div> </div> <button type="submit" class="btn btn-danger btn-lg center-block">tell me more</button> </div> </div>
css
.box { background:white; } .box-head { height:25%; } .box-head p,h3 { text-align:center; position:relative; } .box-head p { font-size:18px; font-weight:700;} .box-head p { color:#2f84cc; font-size:13px; text-decoration:underline; position:relative; top:-15px; } .box-head h3 { top:20px; font-size:36px; } .box-info h1 { text-align:center; margin-top:40px; } #pack-price { position:relative; top:22px; } #charges { text-align:center; position:relative; top:10px;} .box button { margin-top:30px; }
image: image
Comments
Post a Comment