Footer columns render different in each page

Question

Here is the website. The footer should have 4 columns like this page, but in other pages it renders with 2 columns (here) like when page is rendered in smaller screen. Why is that?

Answer 1

This is because your homepage uses mod_vikcontentslider, which loads an older version of Bootstrap (3.3.7) to what your template is using (4.0.0-beta).

There may be an option to turn disable the loading of Bootstrap in the module settings, so firstly look for that.

Either way, the markup for you footer isn't correct.

You currently have the following:

<div class="row">
    <div class="col-md-4 col-sm-12 col-xs-12">
        ...
    </div>
    <div class="footer-office-content fr_col2 col-lg-push-1 col-md-8 col-sm-12 col-xs-12">
        <div class="col-xs-12 col-sm-4 col-md-4">...</div>
        <div class="col-xs-12 col-sm-4 col-md-4">...</div>
        <div class="col-xs-12 col-sm-4 col-md-4">...</div>
    </div>
</div>

So as you can see, you're nesting col-* classes without wrapping them in a row. The row is required as this uses flexbox.

<div class="row">
    <div class="col-md-4 col-sm-12 col-xs-12">
        ...
    </div>
    <div class="footer-office-content fr_col2 col-lg-push-1 col-md-8 col-sm-12 col-xs-12">

        <div class="row">     <<< THIS IS THE MISSING LINE
            <div class="col-xs-12 col-sm-4 col-md-4">...</div>
            <div class="col-xs-12 col-sm-4 col-md-4">...</div>
            <div class="col-xs-12 col-sm-4 col-md-4">...</div>
        </div>

    </div>
</div>

Hope this helps