Forum Academy Marketplace Showcase Pricing Features

Bubbles Starter Template - Made Responsive in New Engine

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

  • 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

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

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

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