Free guide to Bubble's new responsive engine

Showcase
1

Hey Bubble fam,

Here’s an article I recently posted on how the new responsive engine works.

I wrote it as a method of teaching myself in detail how all the settings work and play together, and think it might be the best free resource on the new engine out there.

Also in the article is a link to a ~1 hour video tutorial on the new engine, for those who prefer to watch.

Hope it’s helpful!

12 Likes
2

Thanks for the text version! :grinning_face_with_smiling_eyes:

1 Like
3

Thanks @MattN for this great tutorial. It is quite helpful.

However, I would like to state that “Fit width to content” and “Fit height to content” are really very very confusing.

You have told to interpret them in shrink mode or expand mode. That’s very nice way to look at them.

However, it doesn’t really work like that many times.

For example:

  • Fit width to content doesn’t always mean “shrink as much as you can”. It also means that if width required is more than container space, don’t care about it and take as much space that you need, even if it means that you have to go to widths higher than parent container.
  • It also changes meaning depending on what is the parent container and parent’s parent container’s (and so on) layout is
  • Similarly when “fit width to content” is off (expand mode ideally), a group shrinks to width even lower than containing elements’ widths (even if they are of fixed widths) by going to “min width” of the group without caring for children’s widths
  • There is also an issue seen sometimes that if an element’s contents change after page is rendered, then width and height don’t change run time even though they should. (They would show up fine if content were like that when page was loaded)

I’ve seen such and more confusing issues in layout settings and have spent many long hours fighting and trying different combinations to make things work.

It would be great if you could make your tutorial more detailed on this aspect covering different scenarios like parent container layouts, child container widths, group container layout type etc.

4

Thanks @mghatiya for the feedback!

“Shrink mode” and “Stretch mode” are just simplifications to help understanding. I would say that shrink or stretch ‘as much as you can’ is accurate but it depends on what is included in what the element ‘can’ do.

As you’ve rightly pointed out the behaviour is dependent on the settings of children or parent layouts.

I’ll keep your points in mind though when covering this topic in future. Perhaps more info on best practices for different sorts of layouts is what’s needed :slight_smile: