Site logo

Archived topic

Multi-line footer widgets

7 replies · Started by Miguel on April 19, 2021

Viewing posts 1–8 of 8

Hello!

How could I display the footer widgets on multiple lines? For example: widget 1 and widget 2 on one line; widget 3 and widget 4 on another line, widget 5 and widget 6 on another line.

Thank you. All the best.

Hi there,

simplest method is to use 2 x Footer widgets. And stack 3 x widgets in each of them :)

The problem is that the order in which the elements appear in the mobile version is important. That's why I didn't do it as you say. I need the order in the mobile version to be widget 1, widget 2, widget 3 ...

Thanks. All the best.

Options:

1. Stack all the widgets in a single widget area in Mobile Order. Then if you can provide a link to site ill provide some CSS to order them for desktop.

2. Create the Footer yourself using a Block Element and GenerateBlocks plugin.

Hello!

The second option is not valid for me, because they are contents that have to be seen throughout the site.

Try this CSS:

@media(min-width: 769px) {
  .inside-footer-widgets > div {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-widgets .widget {
    flex: 1 0 50%;
  }
}

In regards to the Block Element - see here:
https://docs.generatepress.com/article/block-element-overview/

This allows you to create a Block layout and hook it in across your entire site ( or display it conditionally ). So it is a method you can use to rebuild theme elements such as the footer widget area for display anywhere or everywhere :)

I have tested the CSS code and it works perfectly. Now everything is as I wanted.

Thank you very much for your help, David!

Glad to be of help

This archived topic is closed to new replies.