some1 some1 - 4 months ago 16
CSS Question

Bootstrap template allows text to overlay photo

I'm trying to troubleshoot an issue with using a bootstrap template for mobile...

This is what the section looks like on mobile, rather than degrading nicely..

I never want the text to overlay over an image, however I can't seem to find any straight answer on how to avoid it happening.

Here is the code currently:

<div class="banner-bottom" id="photos">
<div class="container">
<div class="bottom-grids">
<div class="col-md-3 bottom-grid">
<img src="images/bed.jpg" height="200px">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
</div>
<div class="col-md-3 bottom-grid">
<img src="images/entry.jpg" height="200px">
</div>
<div class="col-md-3 bottom-grid">
<p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>


There is nothing tricky in the CSS -- typical bootstrap 25% width for col-md-3.

.col-md-3 {
width: 25%;
}


How can I make my text areas well defined enough so they don't overlay my images? I would assume setting each div as col-md-3 with a 25% width would be enough to avoid this issue, but I'm obviously missing something.

Answer

You should use col-** classes only inside row class elements. col-** classes are floated items and row class has all needed clearfix styles and negative margins. Something like this:

<div class="banner-bottom" id="photos">
<div class="container">
    <div class="row bottom-grids">
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/bed.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Philosophy:</b><br> We believe meaningful activities provide an atmosphere of good health and spiritual well-being. The activity program is designed to offer opportunities for friendship and self-worth.</p>
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <img src="images/entry.jpg" height="200px">
        </div>
        <div class="col-md-3 col-sm-3 bottom-grid">
            <p><b>Location:</b><br>Located just minutes from downtown Sacramento. Near the Jefferson Boulevard & West Capital Avenue intersection. Close to shopping, churches and senior centers.</p>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

Also, bootstrap does lots of work for you and I'm sure you do not need those .bottom-grid classes and class="clearfix" div over there. Keep it as much simple as you can and you will see you markup improving.

One more thing is giving your img elements max-width: 100%; height: auto;, cause now they are overlapping their parent col- containers.

Comments