Problem with non responsive buttons in Footer

my buttons in the footer don’t appear nice, cut and different on the mobile. how can i make it smaller and display them inside the display of the mobile? Or otherwise from side by side on the desktop version one below the other with a mobile device of 480px and smaller.

Hi Janine,

Thank you for writing in, please see the following tutorials on how Flexbox works.

Flexbox for Rows and Columns (Part 1)
Flexbox for Rows and Columns (Part 2)

If that did not help, please provide us the site URL as you have multiple URL on your account so we can take a closer look at the issue.

Cheers!

Hi

Thanks a lot for your fast answer.
I’ve already watched the videos a few times, often they help me out, but now I still can’t get any further.

In this case it’s all about the buttons in the footer. I don’t see the Colums-Layout settings like in the video to change something. Please have a look at the screenshot

URL



Thank you!

Hi Janine,

Thank you for the URL, first, please set your Bar’s (where the buttons are) height to auto so it will have the appropriate height when the button starts to stack, then use the top padding and bottom padding to give space above and under the button. Then set your Child Placement to Row so the button will be inline by default.

Provide us login credentials in a secure note if you’re still having an issue, so we can take a closer look.

Hope it helps,
Cheers!

1 Like

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

Hello Janine,

Thanks for updating in! It is best that you create two separate bars. One bar is exclusively for desktop screens and the second bar will only be displayed in smaller screens. You can make this possible by showing or hiding the bar for each respective screen size. Please utilize the “Hide During Breakpoints” option which can be found in the Bar > Customize element settings. Please check out this knowledge base article:

Hope this helps.