Pro Footer - Wrap Containers At Certain Screen Size

[whitemedia]

Hi again,

I have just created my first custom footer in Pro with the following layout:

Bar 1 - 4 containers, each with an image within.
Bar 2 - 3 containers, each with text within.
Bar 3 - single container with the copyright, etc.

What I would like to see bars 1 and 2 do is wrap, so that each container is 100% width on small screens, such as an iPhone. Currently all containers remain equally spaced on the same row.

I have tried using the wrap children control, but that also wraps the containers on large screens. Is there a way of achieving what I am after?

Secure note coming.

Thanks,
Christopher

[jade]

Hi there,

Please add this code to the Element CSS of the bars where you want the content to be displayed stacked on smaller screens:

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

Hope this helps.

[whitemedia]

Thank you - perfect! With

align-items: center;

added and some margin changes, all resolved. Thank you.

[friech]

We are delighted to assist you with this.

Cheers!