Is this the best way to go for a responsive header and body?

I’m trying to understand the visual and responsive parts of Bubble. After some testing, I like to share the following outcome.

The rules

  • Max width of the content area is 1100 pixels
  • If the window width is 668 pixels or more the minimal width of the left and right margin is 50 pixels.
  • If the window width is less than 668 pixels the minimal width of the left and right margin is 25 pixels.

To accomplish this result I make use of “spacer-groups”. Is this the way to go in the Bubble world?

Link to the page

Link to the editor

Desktop Preview

iPad Priview

Mobile Priview

Based on how you need your content to be displayed, the current settings look fine to me. I use a very similar approach to manage the Responsive settings.

1 Like