Building Responsive Pages (Legacy)

This page covers educational material relevant to the Legacy Bubble Editor.

Bubble pages are responsive. In other words, they will adjust to the width of the page so that they look great on mobile devices. Since you can position elements to the pixel, you may have to configure a few settings for your page to behave properly as its width changes.

Building responsive pages

You should start designing the page as it should appear on a wide screen, for instance your laptop. Then, once you're done with the wide ("laptop") design, you can start working on narrower designs. That's what the Responsive Viewer is for. The responsive view lets you modify a few parameters that will change how the page behaves when it's being squeezed.

Using the Responsive Viewer

You will find a tab above the New Element palette that lets you switch between the Builder View, where you can modify elements, drag new ones, and delete some, and the Responsive Viewer which lets you test your page under different configurations and modify the responsive behavior of each element. In this view, the ruler at the top of the page area defines the current page width. Just click or drag on the ruler to resize the page and see how the page behaves dynamically. You can also use the preset width icons on the left side of the screen to see how the page looks on iPhone in portrait mode, in landscape mode, on an iPad and on a laptop or a desktop. When you click on an element, the Responsive Palette will display the different parameters you can modify to affect its behavior. Modify the different settings and you’ll see how it impacts the page in real time.

Understanding the Responsive Algorithm

The algorithm that controls how the page is rendered follows a few core principles. While you can tweak and see in real time the impact of the responsive parameters, it is good to have an overall understanding of how the rendering engine works.

In general, as the page gets resized, elements shrink and expand before margins do. Bubble only expands margins if all elements on a line are at their maximum widths, and only shrinks margins if all elements are at their minimum widths and everything that could break to the next line is already on the next line.
By default, most elements are shrinkable and expandable. You can control this on an element-by-element basis in the Property Editor or the Responsive Viewer.
Overlapping elements move together: they expand or shrink together (unless one of the elements is set to fixed width or has a maximum width). In other words, overlapping elements both break, or neither breaks, and they are both shown or neither is shown by any show/hide rules.
Groups (and other containers, such as Repeating Groups) work like mini-pages. Elements can break to new lines inside of them. By setting a minimum width on a group, you can stop that from happening by limiting how far the group can squeeze its contents. And by setting a maximum width, you’ll limit how wide an element can be. For instance, if you want your page to not be as wide as the screen, you can put all your elements in a group and apply a maximum width for that group.

Using the Responsive Debugger

Bubble offers a responsive debugger, both in Run-mode (if the debugger is on) and in the Responsive Viewer (click on the grid icon in the Top Bar). Activating that mode will let you see how the page is structured, and how the elements on the page are grouped together. For example, this can reveal floating groups that hover over elements and make them unexpectedly unclickable, or why elements have more space than expected between them. To activate this in run mode, when the debugger is on, click "Show responsive boxes" under the "Inspect" button. This is important because behind the scenes, a Bubble responsive page is structured into lines and boxes, and these two concepts will help to refine the responsive behavior of your page.

Elements get grouped into boxes. Everything in a box moves together (for instance, overlapping elements are always in the same box). Boxes are the things that can break to the next line, and get shown and hidden. The left-most element in a box is the one that controls its show / hide rules (see below for what these rules are about).
Lines are horizontal rows of boxes. Lines are as tall as the tallest thing in them, and everything in the next line is below the line above it. Boxes can break to a new line if there's no space for them on their current line.

Responsive parameters

You can tweak how an element/page behaves as the page is resized with the responsive parameters. They are accessible from the Property Editor and the Responsive Palette (when you’re in the Responsive Viewer). Understanding responsive settings is easier when you see the actual impact of the different settings. We strongly recommend watching this 17-minute video, as it will illustrate the different options you can use as you build responsive page.

Other

Note: Instagram technically uses its own browser, which is not officially supported by Bubble. Bubble pages will still load in Instagram's browser, but if this is a major use case for you, we recommend you test your pages on this browser first.

Note: If you reference a third-party library in the raw Javascript on a page to modify an element, the way the modified element updates responsively (i.e. as the screen width changes) might not behave as expected, so it's always a good idea to test it thoroughly.

Note: Elements that are wider than the width of the page it's on can lead to unexpected behavior with the responsive engine. Consider making all elements no wider than the page width.

Last updated 2 years ago

Building responsive pages

Using the Responsive Viewer

Understanding the Responsive Algorithm

In general, as the page gets resized, elements shrink and expand before margins do. Bubble only expands margins if all elements on a line are at their maximum widths, and only shrinks margins if all elements are at their minimum widths and everything that could break to the next line is already on the next line.

By default, most elements are shrinkable and expandable. You can control this on an element-by-element basis in the Property Editor or the Responsive Viewer.

Overlapping elements move together: they expand or shrink together (unless one of the elements is set to fixed width or has a maximum width). In other words, overlapping elements both break, or neither breaks, and they are both shown or neither is shown by any show/hide rules.

Groups (and other containers, such as Repeating Groups) work like mini-pages. Elements can break to new lines inside of them. By setting a minimum width on a group, you can stop that from happening by limiting how far the group can squeeze its contents. And by setting a maximum width, you’ll limit how wide an element can be. For instance, if you want your page to not be as wide as the screen, you can put all your elements in a group and apply a maximum width for that group.

Using the Responsive Debugger

Elements get grouped into boxes. Everything in a box moves together (for instance, overlapping elements are always in the same box). Boxes are the things that can break to the next line, and get shown and hidden. The left-most element in a box is the one that controls its show / hide rules (see below for what these rules are about).

Lines are horizontal rows of boxes. Lines are as tall as the tallest thing in them, and everything in the next line is below the line above it. Boxes can break to a new line if there's no space for them on their current line.

Responsive parameters

Other

Note: Elements that are wider than the width of the page it's on can lead to unexpected behavior with the responsive engine. Consider making all elements no wider than the page width.