Changing footer on breakpoint

[KLWink]

I’m getting back to working on my new site after a two month break to work on my org’s fundraising gala (wearing many hats here) and a little fuzzy but I know how to hide stuff on breakpoints but I was wondering if I could set something to change the style on a certain breakpoint. On screen sizes 767px and smaller my footer text gets stacked together and looks funny. Is there a way to set the breakpoint so that on screens that size the text is spread across two rows/containers?

[albrecht]

Hi KLWink,

Thanks for writing in. To achieve that, please add this code in the footer bar’s element css.

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

  $el.x-bar-content .x-bar-container {
      flex: 0 50%;
  }
}

Here’s a screenshot on where you can add the element css.

Hope it works. If it doesn’t, then please send us a link to your site, so we can give you a more accurate CSS.

Thanks!

[ruenel]

Hello @KLWink,

For best result, please do this:

1.) You will need to replicate the current bar by creating another footer bar.
2.) The current bar should only be visible in tablet, desktop and larger screens.
3.) The new bar will have to be design specifically for the smaller screens.
4.) You can easily hive or show the footer bars in different screen size by utilizing the Hide During Breakpoints option.

Hope this helps. Please let us know how it goes.