How to have footer widgets in 2 different rows

[JP]

Hi Tom,

I was wondering if you could help me with this.

I’m building a website and would like to have two rows of widgets in the footer. I understand that they already resize according to the screen resolution or even go to a separate line in case the screen is too small, but I’m looking to have one of them with a width of 100% alone in a row (the 1st widget) and the others on a second row, stacked together side by side as they already are by default. The idea is to have an Instagram feed in the first one.

So it would be something like this:

**Begin of Footer**
Row 1: Footer widgets #1, with a width of 100%
Row 2: Footer widget #2 to #5, automatically adjusting the percentage.
Row 3: Copyright note (as it is already)
**End of Footer**

I tried editing the footer.php file to add a div with the Instagram’s plugin shortcode before the “<?php do_action(‘generate_before_footer_content’);” but the shortcode won’t work unless it’s inside a widget.

Do you think it’s possible?

Also, do you know a way to embed the feed without any plugins? Something clean, like the ‘Pin It’ button from Pinterest (https://developers.pinterest.com/tools/widget-builder/?buttonType=imageHover)

Thanks,
JP.

[Tom]

You could try just targeting the first widget with some CSS:

.footer-widget-1 {
    width: 100%;
    float: none;
}

Let me know 🙂

[JP]

Hi Tom,
Thanks for your quick reply.

It worked perfectly for the first one (the 100%) but the others are not displaying correctly on the second row. Even with a maximized browser window on my 15″ laptop the other 4 are not occupying the full width of the second row.

Check this out http://imgur.com/1MrHujp or http://imgur.com/8BHkW0d (with more than one box on one of the widgets)

I tried including the % manually for the other ones using .footer-widget-2, .footer-widget-3, .footer-widget-4, .footer-widget-5 { width: 25%;} and it worked for the desktop version (http://imgur.com/Ims30vm) but I’m afraid I lose the responsiveness with other devices (http://imgur.com/eE7qQGT).

I also tried using the hook before the footer (while keeping the layout with only 4 footer widgets) but it goes full screen instead of limiting it to the max size of the content (1100px in this case).

JP.

[Tom]

To keep the responsive aspect, you could do this:

@media (min-width: 769px) {
    .footer-widget-2, 
    .footer-widget-3, 
    .footer-widget-4, 
    .footer-widget-5 { 
        width: 25%;
    }
}

[Author]

Posts