1

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. 

<!-- 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>
McDuck4
  • 662
  • 1
  • 10
  • 33

1 Answers1

2

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;
}
pr0gramist
  • 8,305
  • 2
  • 36
  • 48
  • Thank you a lot for your answer. If I remove the float: left, the result would be the same in portrait view on an ipad. But outcomment the margin-bottom did the job. God knows why? Thank you for the help :) – McDuck4 Sep 11 '16 at 20:09