css - Button width % seems to jump out of container on smaller screens -
using bootstrap3 mvc5.
using grid system, have 4 across in row ("col-md-3"). here html 1 box:
<div class="col-md-3"> <div class="index-box"> <h2>other reports</h2> <p>click button go report index page.</p> <button class="big-button">view reports</button> </div> </div>
in full screen, button sits nicely in box, when view on mobile device, boxes stacked (as should) button width becomes percent of full screen instead of .index-box. here current css:
.index-box { border: 1px #527f03 solid; border-radius: 5px; text-align: center; padding-bottom: 20px; height: 250px; max-width: 260px; } .index-box h2 { position: relative; top: -25px; background-color: #dfece2; display: inline-block; } .big-button { position: absolute; margin-left: -35%; left: 50%; width: 70%; max-width: 70%; bottom: 20px; background: #9cc64e; padding: 5px 10px; color: #23423a; font-size: 18px; text-decoration: none; }
how looks on mobile screen width:
using bootstrap's classes when available, such .btn-block
give full-width button, wrap in container , add margin or padding it. , remove absolute positioning...
this should point in right direction....
.big-button { background: #9cc64e; padding: 5px 10px; color: #23423a; font-size: 18px; text-decoration: none; } .big-button-cont { padding: 0 15%; } </style> <div class="col-md-3"> <div class="index-box"> <h2>other reports</h2> <p>click button go report index page.</p> <div class="big-button-cont"> <button class="btn big-button btn-block">view reports</button> </div> </div> </div>
it's idea take bootstrap's classes , modify them in "override" loads after bootstrap.css
stylesheet, way can keep within framework , change bits , pieces need, such button color, etc.
Comments
Post a Comment