Currently, I am in the midst of a project and require assistance in ensuring an element on my webpage is responsive. Specifically, I need the text within a box to overlap the accompanying image when the browser window is resized. Should I add a class to the HTML entity or modify the CSS code? It's imperative that the text remains visible even in smaller views, as illustrated in the images below: Normal look & Resized look
The following is the current HTML structure:
<div class="col-md-9">
<div class="item">
<div class="row">
<div class="col-md-3">
<a><img src="../images/pimg.png"></a>
</div> <!-- End Image -->
<div class="col-md-6">
<h4 class="item-name">Item1</h4>
<p class="item-desc">This is an item's description. Feel free to edit me :)
<a href="" class="btn btn-rounded btn-default btn-framed btn-small">Learn More</a>
</div>
<div class="col-md-3">
</div>
</div>
</div> <!-- End Middle -->
</div>
CSS (Item):
.item {
-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.07);
background-color: #fff;
display: block;
}
.item:hover {
-moz-box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
box-shadow: 1px 10px 15px rgba(0, 0, 0, 0.12);
color: #000;
}
.item-name {
padding-left: 15px;
padding-top: 10px;
}
.item-desc {
padding-left: 15px;
font-size: 14px;
color: #A4A4A4;
}
CSS (button):
.btn {
-moz-transition: 0.3s ease;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
border: none;
outline: none !important;
font-weight: bold;
padding: 4px 12px 6px 12px;
}
.btn.btn-rounded {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.btn.btn-framed {
background-color: transparent;
border-style: solid;
border-width: 2px;
}
.btn.btn-framed.btn-default {
border-color: rgba(31, 31, 31, 0.2);
color: #1f1f1f;
}
.btn.btn-framed.btn-default:hover {
border-color: #03B01D;
}
.btn.btn-framed.btn-small {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
padding: 4px 10px;
}