Hi there,
I’m trying to have the footer with 4 columns to be responsive. I had it working but just can’t seem to figure out how to get it to go from 4 columns to 2 columns. I would also prefer that the 4 columns go immediately to 2 columns vs. 3, how do I do that? When they go to 2 over 2 columns can they be equal in size? so it looks like 2 even squares (the color line is the same length). Then they all stack in mobile screens and are responsive to at least 380 pixels. Thanks for your help!
Hello Erin,
Thanks for writing in!
The footer bar is using Flexbox layout option which will stay the same in all browser screen size. If you want to have different number of columns in different browser screen sizes, you will need to insert another bar that will only be visible on smaller screens. This bar will only have two containers so that it will display two columns only.
As an alternative, it would also be easy if you design your footer using Global Blocks. Go to Pro > Global Blocks and create your footer block. You can use the new Grid layout within your block. With this grid element, you can easily create the columns from 4 to 2 in different screen sizes.
Desktop:
Medium:
Small:
You can then use the Global block shortcode and insert it in your footer bar.
To know more about the Global Block, kindly check this:
And to get acquainted with the new Grid Element, please check out this video tutorial:
Great idea! I used a global block to create my main menu and this really worked nicely. I will try this. I also really like the new grid feature. I will let you know how it goes as I sometimes struggle with how the flexboxes communicate between footer container and global block container.
Hi again,
Ok I made the footer with the global block, check out website link I provided to the temp site.
I cannot seem to get the flexboxes right!! It looks good in the global block preview but then when I put it into the content element on the footer, the flex box is not working correctly. What am I doing wrong? I have played with the flexboxes and also watched the videos but it is complicated when working with global blocks inside of other elements with their own flexboxes. Thank you!
I actually figured this out. Thank you!
Hi Erin,
We’re glad you were able to figure it out. Have a great day!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.