Footer Image Stacking

I have a six-column footer arranged as follows:

  1. Text (Address)
  2. Facebook widget
  3. Logo
  4. Logo
  5. Logo
  6. Logo

I have created a horizontal desktop container and a vertical mobile container, however, when the view port shrinks, the text box disappears first, the FB widget remains visible and the logos do not stack properly.

How do I spec each element to stack properly vertically on mobile?

URL: https://grand-view.com/

Hi there,

I suggest that you have 2 separate bars with the same information. One for the Desktop and one for the mobile. You simply can duplicate the same bar. For the Desktop please use the Flex Row and for the mobile use the Flex column. You can show/hide a bar for different devices using the hide during the breakpoint feature.

I also suggest that you check this and this articles.

Thank you.

I duplicated the bar and tried every possible combination of column flex on the bar, container and each element, but nothing seems to work.

Can I have you take a look at the Global Footer and see what’s wrong? Two issues:

  1. The second bar jams two elements on the left and does not wrap three elements.
  2. The elements run into the menu and copyright bars below.

I have included credentials in secure notes.

Hello There,

Thanks for updating in!

1.) Please make sure that all the widths are set to 100% to make sure that they will be stacked below each other.

2.) This is because you have set a height for your bar. I have remove it and set to auto.

Please check your footer now.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.