Bubbles Starter Template - Made Responsive in New Engine

Need help
1

Trying to wrap my head around the new responsive engine.

Could anyone help with an example of how to make Bubbles Starter Template responsive? (the default template when you make a new app).

Specifically the hero section.

This is how it responds in old responsive engine
1

  • In desktop view it has a hero section, two columns, text on left side and image on right side (great!)
  • At around 950px page width, the image breaks to the next row (great!)
  • In mobile view (around 350px), the text and image still looks great and responds to the width (great!)

New Responsive Engine
In the new responsive engine I seem to have to make a trade-off between the elements fitting to a small mobile screen OR having it break at e.g. 950px.

  • If the two columns are set to min width of e.g. 320px, then it looks right on mobile but is not breaking at 950px.
  • If the two columns are set to min width of e.g. 450px, then it breaks at around 950px, but doesn’t like right on mobile

What am I missing?

See the public editor here: Question-public | Bubble Editor

2

The end goal is to create something like the hero section here: https://www.whalesync.com/ or the one from Webflow https://webflow.com/

3

@sudsy came with the solution here (= breakpoints at specific widths not available yet, but on Bubble’s backlog)

4

This topic was automatically closed after 70 days. New replies are no longer allowed.