Centered responsive header?

I have amateur familiarity with CSS but am very new to Bubble. I’m trying to make a standard header with menu / logo / login that is responsive.

It looks like this in desktop, as it should, with all elements in a row, the menu left, the logo center, and login right:

But in mobile it bumps each element to its own line, and doesn’t stay on the same row, because the margins stay fixed and do not shrink, and I don’t know where to find a float setting:
image

I’ve tried various combinations of grouping elements, changing from fixed to flexble width, etc, but I can’t find anywhere to change the margins.

In CSS, I’d try to float the menu left, float the login right, and center the logo, maybe with auto-margins.

How do I try to do this in Bubble?

1 Like

Hey there :wave:

I know responsiveness is tricky. Take a look at this video. It will help you with the header.

1-Minute Video - https://www.nocodeminute.com//1-minute?video=1585757477887x628395157715549600

This is one of my first videos so sorry about the poor audio quality.

6 Likes

That mostly worked! Neat workaround!

So what I did was:

  • I added Group rectangles in the spaces to the left and right of my logo
  • I made them stretch the entire spaces
  • Then I made them a “min width of 0%”

The logo still is not exactly centered, but it is not bad! The logo is aligned noticeably left, but that doesn’t kill the design too badly.

image

Good idea!

Cool. Glad that helped. Make sure your logo is centered horizontally on the page. Right click to see the option.

I have no idea how the heck that worked (and I know CSS!) but thanks a bunch - I wasted an hour or two figuring it out and your fix did the trick instantly!

1 Like

So glad it helped! :blush:

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes

Yep! Responsiveness is one of the most important and trickiest skills. It has taken me a long time to get to where I am today and I would still call myself Intermediate. :laughing:

1 Like

Yeah, it definitely takes a while to learn. :sweat_smile:I was very interested in making less work for myself in the long run. I don’t need to make a desktop version and a mobile version, which means that I only have one place to update things. I no longer need to update two pages each time I want to push an update. It was worth it, to me, to take the time and invest in learning it well. :blush:

1 Like