Position Three Buttons On The Same Centre Line

I have three separate buttons within the same row and container, however due to the content above them, they're not all on the same horizontal line. This is worsened on a big scre

Solution 1:

The problem is that you can't predict the text in the above sections will always finish at the same point so, as they currently are, it's not technically possible. There are some hacky fixes you could do, but I think the best solution would be to take the buttons out of those containers entirely, and have a separate "row" element that contains them.

That way, if the text in one of the columns gets longer for whatever reason (text added, different screen sizes), the whole "button row" will be pushed down equally and the buttons will always maintain the same baseline

Hope that makes sense

Solution 2:

Modify the line in homepagestyle.css

#step1button {
    margin-top: 21px;
}

This will fix your issue

Solution 3:

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:

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:

<divclass="container-fluid"><divclass="row"><divclass="fadein bg-3 text-center"><h3class="h3big">What do you need help with?</h3><br><divclass="col-sm-4"><imgsrc="/img/button-1.png"alt="button-1"class="middleimages"><divclass="box-content"><pclass="alltextbig text-uppercase"><b>Living</b> paycheque to paycheque?</p><figure><imgsrc="/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><buttondata-sumome-listbuilder-id="6ffa68f2-f144-418b-afe0-4de05390e083"class="text-uppercase btn btn-primary btn-lg btn-middle">Start Class Now</button></div></div>