Archived topic
Multi-line footer widgets
7 replies · Started by Miguel on April 19, 2021
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