Stacking footer elements

Hi, I've used a default templates that uses columns, however I need to stack some elements inside the colomun as in a row.

Uploading...

Basically I need the social media icons and the delivery images to be in a row, not stacked on top of each other, however the flex layout is set as I column and I can't seem to figure out a way to do it. Thanks in advance.

Hi @vlntnt,

Try setting the container's flex layout to column. Then set the text element's width to 100%.

Let us know how it goes.

Hi, I think my image didn't upload properly. Please check the footer here: http://arapina.valentin.graphics/

I'm not sure about which text field you are talking about but my issue is with the icons - they appear on different rows on top of each other and I want them inline and the other images (amazon, deliveroo) again on the same row but below the heading (Now available on). Thanks.

Hello @vlntnt,

Thanks for updating the thread. :slight_smile:

If you would like to stack text (NOW AVAILABLE ON) and Icons on top of each other, then please do following:

  1. Let's have two different Containers, one for Text and other for Social Icons.
  2. In First Container, add the text element and in second container add the Social Icons.
  3. Alignment for elements of elements on top of each other can be done from Bar > Flex Layout > Layout and select Column.

To help you get started, I have recorded a screencast that you can take a look.

Thanks.

This seems to work for a single column, but when I try to have 4-5 columns, everything comes very messy with me. I think it gets quite tricky cus I want to insert Row, inside a Column, inside a row, and it never seems to work. :confused:

Hi @vlntnt,

Please set the second and fifth Container's Flex Layout to ROW and enable the Wrap Children option



Now what this does is it will try to inline all your element inside the Container, right? So the text (NOW AVAILABLE ON) and images will inline.

It will not, if the text takes up an entire ROW, to do that, please set the Text width to 100%, this will force the 2 images to wrap underneath the text.



Please do the same for the second container.

Hope it helps,
Cheers!

Thank you, it worked :slight_smile:

You're most welcome!

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