Forum Academy Marketplace Showcase Pricing Features

How to make a header responsive

I am trying to use a responsive header in my bubble app. But when I shrink the screen (to tablet size for example) the header stays the full 1280 px width. I can not get it to shrink. does anyone know how to fix this? I have added my current dimensions below.

What does ‘Width for UI’ builder exactly?


Is that a reusable element? On the page you use it, you should be able to just mark width at a fixed 100%.

It is a reusable element, I tried marking it to be fixed at 100% width, but when I shrink the page it stays at the 1280 px width.

@anon31591471 if you want it to be responsive do not work with fixed widths. Instead just use min-width / max width parameters.

For example if you want your header to be mobile friendly set it’s min width to something like 320px (maybe less if you have padding or margin) - you don’t have to set max width.

I tried doing that but whenever I try to delete the ‘Width for UI builder’ width it wont let me delete.

Oops your right thanks

np! you can mark the post and solved.