Button width % seems to jump out of container on smaller screens - css

Question

Using bootstrap3 with mvc5.
Using the grid system, I have 4 across in a row ("col-md-3"). Here is HTML for one box:
<div class="col-md-3">
<div class="index-box">
<h2>Other Reports</h2>
<p>Click this button to go to the report index page.</p>
<button class="big-button">View Reports</button>
</div>
</div>
In full screen, the button sits nicely in the box, but when I view on mobile device, the boxes are stacked (as they should) but the button width becomes a percent of the full screen instead of the .index-box. HEre is 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 it looks on mobile screen width:

Answer 1

Using Bootstrap's classes when available, such as .btn-block will give you a full-width button, then wrap that in a container and add margin or padding to it. And remove the absolute positioning...
This should point you in the 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 this button to go to the report index page.</p>
<div class="big-button-cont">
<button class="btn big-button btn-block">View Reports</button>
</div>
</div>
</div>
it's a good idea to take bootstrap's classes and modify them in an "override" that loads after the bootstrap.css stylesheet, this way you can keep it within the framework and just change the bits and pieces you need, such as the button color, etc.

Answer 2

Try adding position relative the index-box. An element that is positioned using absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If it has no positioned ancestor it will position itself relative to the viewport