Responsiveness Problem

Hello,

I’m working on my mobile version at the moment.

I really don’t grasp how the logo (top center) center to be center-aligned, shifts to the next line even though there is plenty of space.

The log is inside a group together with the slide menu icon on the left. The slide menu icon is left-aligned and the parent group center-aligned.

Makiavelia _ Bubble Editor (4)

Can someone please help me understand? Thanks.

Hey there,

I think it must have something to do with the size of the first group where the menu icon is inside. Try to change the minimum size in %.

You can also post some pictures of the settings of each group here, to make it easier to find a solution.

Thank you!

I tried to play around but couldn’t figure out a solution. I’ve now created a re-usable element with four components:

  • Slide Menu
  • Version N#
  • Logo
  • User Icon

And all 4 are in a Header Content group.

Here is the current behavior:
Makiavelia _ Bubble Editor (5)

The logo is not staying in the middle, so its right margin collapses but not its left margin. The user icon drops far below where it doesn’t belong, it should stay on the top right at all times.

Here are the various settings of each item:

SlideMenu Icon
image

Version N#

Logo
image

User Icon
image

And finally the parent group:
image

Now that I’m typing this, I wonder if I should not be using floating groups within the header? Is that how it should be done?

Responsiveness is such a pain :frowning_face: