2

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?

  • Upon fixing your pages, I believe your links are now valueless in expressing the issue. It would have been good to capture the issue as a screenshot and post those images to this page rather than offer links. If you can manage to revert your correction and amend your question, you will be much more likely to help future researchers who may have the same issue. – mickmackusa May 26 '18 at 1:24
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

  • thank you! I added the row class and it worked. But I am curious, why it was rendered different in the pages? – aggicd May 16 '18 at 15:09
  • Glad it helped. It's because the homepage has v3.3.7 is Bootstrap being loaded. This version uses older methods for their grid construction, which if I rightly remember, allowed you to nest columns without a row. Don't quote me on that as it's been a long time since I used v3 :) – Lodder May 16 '18 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.