I have an issue where my images are stretching into the padding or margin that bootstrap uses to separate columns. I want to maintain the column division but avoid having the images stretch. While I have managed to shrink the image using padding, the whitespace between the columns becomes clickable, which is not what I desire.
<div id="cont_divider" class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_1">
<div class="row">
<p class="stair_image_font_style">Straight<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_2">
<div class="row">
<p class="stair_image_font_style">Single Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_3">
<div class="row">
<p class="stair_image_font_style">Double Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col_divide">
<div class="row text_center">
<a href="#" class="image_link_styling">
<div class="col-md-12">
<div id="inner_cont_4">
<div class="row">
<p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
<img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/triple_winder.jpg" alt="straight staircase">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
#inner_cont_1{
background-color: #336699;
}
#inner_cont_2{
background-color: #cc6633;
}
#inner_cont_3{
background-color: #ff6633;
}
#inner_cont_4{
background-color: #ffcc66;
}
.staircase_imgs{
box-sizing: border-box;
width: 100%;
display: block;
padding: 0 1.238em 0.3em 1.238em;
}
.stair_image_font_style{
font-size: 2em;
color: #ffffff;
line-height: 1em;
padding: 0.8em 0.938em;
margin: 0;
}
.col_divide{
margin-top: 1em;
margin-bottom: 1em;
}