How to have footer widgets in 2 different rows

Home Forums Support How to have footer widgets in 2 different rows

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #191501
    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.

    #191527
    Tom
    Lead Developer
    Lead Developer

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

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

    Let me know 🙂

    #191773
    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.

    #191853
    Tom
    Lead Developer
    Lead Developer

    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%;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.