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:

enter image description here

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

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -