[Solved] Position three buttons on the same centre line

by


The problem with using a seperate row was that on a mobile device all the three buttons (in the seperate row) sat away from their relevant content.

This meant it was very confusing on a mobile device to understand what the buttons took the user to, this looked like:

Odd mobile

By adding a simple <br /> I was able to push the one odd button onto the same line as the other two buttons.

I then removed:

              #step1button {
margin-top: 30px;
}

So the final HTML looked like:

   <div class="container-fluid">
     <div class="row">
<div class="fadein bg-3 text-center">    
  <h3 class="h3big">What do you need help with?</h3><br>
    <div class="col-sm-4">
         <img src="https://stackoverflow.com/img/button-1.png" alt="button-1" class="middleimages">
         <div class="box-content">
                       <p class="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p>
                       <figure><img src="/img/pound-coins.jpg" alt="saving money image" title="Saving money" class="tripleimage">
                       <figcaption><b>Feel like you're walking on a tightrope every day?</b> <br>Stuck in a pay cheque to pay cheque cycle, can't keep your budget in check, dont have a budget, use credit cards or have no savings? <br><br>
                        <br />
                       <b>Lesson 1</b> - Learn how I escaped the pay cheque to pay cheque cycle.</figcaption>

                       </figure>


<button data-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083" class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button>


              </div>
              </div>

solved Position three buttons on the same centre line