Footer static block order

Question

I have 3 static blocks in footer. Now they are showing up like

Block1
Links
Links

Block2
Links
Links

Block3
Links
Links

I want to show them in same line - like

Block1    Block2    Block3
Links     Links     Links 
Links     Links     Links

How to achieve it

Answer 1

You need to use CSS rules to achieves this. So without having proper looking on your footer section, we can't give you a specific answer. Possible solutions which I can think of now is :

Solution 1

Use a core/template block to wrap all of your static blocks and then apply css rules in that template

File : app\design\frontend\{package}\{theme}\layout\local.xml

<layout>
    <default>
        <reference name="bottom.container">
            <block type="core/template" name="footer.sb.wrapper" template="custom/footer/sb_wrapper.phtml">
                <block type="cms/block" name="footer.inlines.sb.1" as="sb_1">
                    <action method="setBlockId">
                        <block_id>sb-block-1</block_id>
                    </action>
                </block>
                <block type="cms/block" name="footer.inlines.sb.2" as="sb_2">
                    <action method="setBlockId">
                        <block_id>sb-block-2</block_id>
                    </action>
                </block>
                <block type="cms/block" name="footer.inlines.sb.3" as="sb_3">
                    <action method="setBlockId">
                        <block_id>sb-block-3</block_id>
                    </action>
                </block>
            </block>
        </reference>
    </default>
</layout>

File : app\design\frontend\{package}\{theme}\template\custom/footer/sb_wrapper.phtml

<div style="display:inline">
    <?php echo $this->getChildHtml() ?>
</div>

Here footer.sb.wrapper is the wrapper block of all three static blocks. The template associated with this block is sb_wrapper.phtml and it holds a simple css rule in it's parent div. ie display:inline.

Solution 2

You can use an extension : magento-js-css-for-static-blocks which is created by me. What this does is, it allows us to add css and js for each static blocks. So add your css rules there and make your static blocks in line.

There are thousands way to achieve this. Use the better one. Above I just provide you some ideas to achieve this.

Answer 2

I encountered this same problem in magento 2.1.0, I simply changed the css and it worked: .footer.content .links{display:flex;}

Also, I gave the class=footerlinks to the unordered list created in each block and added the css .footer.links {display: block !important;}