Stack columns in custom footer

[finkk]

Hello there,

I have a custom footer with four columns.

How do I make the columns stack on small mobile screens? See the attached pic - they are currently cut off on screens around 425px.

Kind regards,

Spencer

[ruenel]

Hello Spencer,

Thanks for writing in!

The footer columns will display across the screen size. Most people would design two separate footer bars. One bar for the desktop screens and the other is for smaller screens. This is all possible by showing/hiding the bar in designated screen size by utilizing the “Hide During Breakpoint” option. You might want to check this out:

• https://theme.co/docs/hide-or-show-content-by-device-size

If you do not want to add another bar, you can add a custom inline element css in your bar’s “Customize” tab.
You can add this css:

@media(max-width: 767px){
  $el.x-bar-content {
    flex-direction: column;
  }
}

We would love to know if this has worked for you. Thank you.