McDuck4 McDuck4 - 2 months ago 22
CSS Question

bootstrap col is not fitting

When I look at my website "services" on an ipad landscape view, my services are going down one row. I have inspected the developer tools, and can see if I untick the bootstrap 33.3 %, each service will get 50%.

But I cannot see how I can get each one to fill 33.3%, when the bootstrap has defined it. I also defined how many col the div class should use. I looked through my CSS, and I do not have any padding, margin or so that should cause this.

My Site

<!-- begin services section -->
<section class="services">
<div class="container">
<div class="row">

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-paper-plane-o"></i>
<h3>AutoPilotHQ</h3>
<p>
I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms.
</p>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-tablet"></i>
<h3>Mautic</h3>
<p>
I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads.
</p>
</div>
</div>
</div>
</div>
</section>

Answer

CSS can be tricky.

The icon of service <i class="fa fa-paper-plane-o"></i> is set to float: left; and it brakes the layout.

Add this rule to fix it:

.service.small:after {
    content: " ";
    clear: both;
    display: table;
}

Disabling the following CSS rule also repairs your layout (I am not sure why):

.services .service {
    margin-bottom: 30px;
}