How to Make Centered Elements Responsive in Bubble

By littlebaytech.com

Responsive Series (Lesson 1): Bubble is an incredible technology that lets anyone design and program custom software without writing a line of code! This article explains the basic concepts of Bubble’s responsive engine, so that you can make your app’s pages responsive for all screen sizes.

In this tutorial, we’ll make a simple landing page section responsive, and learn more about how Bubble’s responsive engine works.

Estimated time to read/complete tutorial: 20 minutes
(*A short summary of steps is at the end of this article without the responsive explanations)

After completing the steps in this article, our page will look like this as it is resized from desktop to mobile:

Completed lesson app pages for reference:
Editor: https://bubble.is/page?type=page&name=lesson-1-design&id=littlebay-series&tab=tabs-1
Preview: https://littlebay-series.bubbleapps.io/version-test/lesson-1-design

What are Margins?

A margin is any whitespace on the left, right, and top side of an element. Similar to margins on a piece of paper, in Microsoft Word, or in this Medium article, we have whitespace (margins) on the left and right side of our page’s content so it’s easy to read on large screens.

When building a page in Bubble, these empty spaces (margins) either remain fixed, shrink, expand, or collapse depending on the page width, and the responsive settings that we set on the page’s elements.

Below is a GIF of this lesson’s completed page. It contains 133 pixel margins on the left and right sides of the group, and a 56 pixel top margin. (The margins are highlighted in green after clicking “Explain Box Margins” in the responsive editor).

By default, Bubble tries to keep these margins “constant” (i.e., the size that you define them in the editor).

Meaning that as the page is stretched to large screen sizes (desktop monitors), or minimized to mobile screen sizes (iPhone), this group’s left and right margins will stay the same size at 133 pixels, and the page’s content (the group, heading, description and email form) will either stretch on large screens, or get very skinny on mobile.

This lesson focuses on how to show margins on large screen sizes, and how to remove (i.e., collapse) those margins when the page is viewed on mobile (since we won’t need so much whitespace on such small screens).

Step-by-Step Tutorial

Enable Bubble’s Responsive Engine

Double-click on the page to open the page’s property editor. Make sure “This page is fixed-width” is unchecked. Unchecking this setting enables Bubble’s responsive engine.

Turn on “Show Distances on Hover” Setting

Turn on the distances setting in the UI editor by clicking Grid and Borders → Show Distances on Hover (checked). This setting shows the distance between the selected element and the element you are hovering over.

Add a Group Element

To contain our landing page’s centered content, we’ll use a group. Add a Group Element to the page, leaving some space on the left and right sides of the group.

Then, center it by clicking Arrange → Center Horizontally.

Add Your Page’s Elements

Inside of this new group, add the following elements:

• A text element for the heading
• A text element for your app’s description
• An input element and button to create an email signup form
• A text element for any microcopy beneath the email signup form

How to add these elements is shown below:

Note: Make sure “Shrink the element height if the text gets shorter” is checked for all 3 text elements:

This setting removes any extra space on the page incase the text element’s height is longer than the text’s height.

The benefit of having these elements contained in a group is that instead of individually modifying the responsive settings of each landing page element (the heading, description, and email form) — we can just modify the responsive settings of the container group, which automatically affects the elements’ inside of it. It’s much faster!

Set Your “Mobile” Margins

After adding your elements to the group, make sure you leave some space between the left/right sides of the inside elements, and the left/right edges of the group (the 20 pixel spaces are marked below).

The inside elements are aligned and resized so that there are 20 pixel margins between the left/right edges of the inside elements and the left/right edges of the group element.

Why is this needed? When the page shrinks to mobile, these 20 pixel “mobile” margins will provide a nice “cushion” between the edges of the screen and the text.

Add a Conditional Statement which Shrinks the Heading Text Size on Mobile

In the editor, the heading text’s size is set to 55. When the page shrinks to a mobile width, we don’t need the heading text to be that large.

To lower the text size on mobile, add a conditional statement which sets the Heading’s text size to 30 when the page width (or screen size) is less than 500 pixels. (You can navigate to the conditional tab by double-clicking on the heading text element to open its property editor, and select the “Conditional Tab”).

Set the Group’s Margins to Collapse when the Page Width Shrinks to a Certain Point in the Responsive Editor

Now that we’ve determined our “mobile” margins (those 20 pixel spaces) and adjusted the heading text size for mobile, we need to tell Bubble to remove (i.e., “collapse”) the large, 133 pixel margins on the left and right sides of the group as the page shrinks in size.

In the screenshot above, there are 133 pixel margins on the left and right sides of the group element, between the edges of the group and the edges of the page. If we don’t collapse these margins as the page shrinks, there will be way too much margin (i.e., whitespace) shown on tablet and mobile devices.

We need to collapse these margins to ensure our page’s content (the heading, description text, and email signup form) will take up most of the page, not those large margins.

To collapse the group’s margins once the page shrinks to a certain size, first navigate to the responsive editor by clicking this tab:

Then, click on the Group Element so that its border is highlighted in orange. Type 920 into the “Collapse margins when container width is less than or equal to X pixels” setting (shown below):

This setting is telling Bubble to “Collapse the group’s 133 pixel margins when the page width is less than or equal to 920 pixels”. This means that when the page width is greater than 920 pixels (the screen size or page width is 921 pixels or more), the 133 pixel margins on the left and right sides of the group will be shown.

You can see that the left and right side margins are still there when the page width is viewed at 921 pixels:

In contrast, if we shrink the page just one pixel further (to 920 pixels), Bubble enforces the collapse setting that we just added (“When the page width is 920 pixels or less, collapse the group’s margins”), and the left and right side margins are no longer there.

Though we’ve set the group’s 133 pixel left and right margins to collapse when the page is 920 pixels or less, the inside group elements’ 20 pixel “mobile” margins remain there at all times. The 20 pixel margins are still there because we only set the Group’s margins to collapse — not the margins of the element’s inside of the group. The 20 pixel margins are shown below when the page is previewed at 920 pixels:

For example, when we shrink the page width further to mobile (300 pixels), those 20 pixel “mobile” margins are still there on the left and right sides of the elements:

Here’s the page re-sizing in action!

Add a Maximum Width to the Group Element

In the previous steps, we adjusted the responsive settings for when the page shrinks in size.

In contrast, if we stretch the page width (or view our page on a large monitor), the elements’ widths will expand, making them look stretched.

For example, this is what the page looks like when viewed at 1200 pixels (the screen size of some desktop monitors):

The screenshot shows that Bubble has kept the 133 margins “constant” (i.e., they have not changed in size as the page width increased to 1200 pixels).

Since we haven’t added a maximum width to the group or any elements inside of the group, the elements will keep stretching as the page width increases. While most of the elements look okay in the above screenshot, the email input is too long.

To fix this stretching problem, we can apply a maximum width of 100% to the group element. This will prevent the group and the elements inside of the group from stretching beyond the width that it is defined in the editor:

In your app, make sure the group is selected and that “Apply a max width is checked” and set to 100%. This is telling Bubble, “The group should not expand beyond 714 pixels”; which is “100%” of the Original Width of the group, as it is defined in the editor:

Now when our page is previewed at 1200 pixels, Bubble doesn’t stretch the group or the elements inside of the group (because they’ve reached their maximum width of 714 pixels), and instead expands the group’s left/right-side margins from 133 pixels to 243 pixels.

Edit the Responsive Settings of the Email Sign Up Form

If we shrink our page down to mobile width, we can also see that our email input is too small:

This is because its default minimum width is 100 pixels (shown below). This minimum width setting currently tells Bubble, “As the page width becomes smaller, this element’s width can be decreased all the way down to 100 pixels” (100 pixels in width is too small for an email input; a minimum width of at least 200 pixels is probably a better width to fit an email address).

In the screenshot above, the input element is 156 pixels at mobile screen size, about half of the page width. The input element hasn’t yet reached it’s minimum width, and it is too small right now.

To fix this issue, increase this email input’s minimum width to 40% so that its new minimum width is 200 pixels. This will cause the email input to take up the entire line, and cause the Sign Up button move beneath it, and expand in width.

To set the Sign Up button to move and stretch beneath the email input on mobile screen sizes, uncheck the Maximum Width setting on the Signup button.

Since the Sign Up Button had a maximum width setting of 100% (i.e., it would never stretch beyond its Original Width in the editor), that prevented it from taking up the entire line beneath the email input on mobile screens. Removing the maximum width in this example allows it to stretch when it moves to the next line on mobile.

The previous steps are shown in this video:

Add Your Logo or App’s Name

Add your logo (an icon, image, text element, or combination of the three in a group) to the top left corner of the page. Make sure the single element or group containing the element has the “Make this element fixed-width” checked.

The fixed-width setting makes sure our logo elements will not move, stretch or shrink. The logo will remain fixed at 160 pixels (it’s Original Width, as defined in the editor); it will look how it does in the editor at all times.

Next, make sure there is a 20 pixel margin on the left side of the logo element(s), between the left side of the logo element(s) and the page. This will make sure that everything lines up evenly on mobile.

Set Your Logo Element to Have a Fixed-Left Margin

In the responsive editor, click on the logo element (or group logo element) and select the fixed-left margin in the responsive editor:

Combined, the 20 pixel margin and fixed-left margin tell Bubble, “As the page size shrinks or expands in width, always keep the logo’s left-side, 20 pixel margin fixed (i.e., don’t change its size)”.

Note: The “fixed-margin:left” setting does not necessarily mean “left-aligned”. It means keep the left-side, 20 pixel space between the edge of the page and this element fixed at all times.

This setting ensures that the logo will line up evenly with the rest of our elements when the page shrinks to mobile (shown below):

All Done! ✨

Here’s the page resizing from desktop to mobile in action!

Step-by-Step Summary:

1. In the UI editor, place a group element on the page.
2. Center the group element by clicking Arrange → Center Horizontally.
3. Click Grid and Borders → Show Distances on Hover — Checked.
4. Place four elements in the group: a text element for your heading, a text element for your site description, an input and button for email signups, and another text element for microcopy beneath the email form.
5. Create a “mobile” margin by making sure there is 20 pixels of space between the left and right sides of the group’s elements, and the left and right sides of the group.
6. Add a conditional statement to the heading text element so that it the text size changes to 30 “when the Current Page Width < 500”.
7. In the responsive editor, click the group element and set the group to “Collapse when container width is less than 920 pixels”. With the collapse rule set at 920 pixels, the spaces (margins) on the left and right sides of the group element will collapse once the page width is 920 pixels or less, but the 20 pixel margins inside of the group will remain there.
8. Add a Maximum Width to the group of 100% (to prevent the text from stretching too much on large monitors).
9. Add an element for your logo (text, image, group or both) to the top left corner of the screen. Make sure there is 20 pixels of space between the left-side of the logo element and the left side of the page.
10. In the responsive editor, set the logo element to “Fixed-Width” and “Fixed Left Margin” to prevent it from resizing and keep it anchored to the left side of the page.

More Examples

I’ve included a few more centered groups with collapse rules in this lesson’s app editor:

Bubble Editor - littlebay-series

Though the examples have different elements inside of their groups, everything functions in a similar way. You’ll notice that the 20 pixel margins of space are included for each group. It may be helpful to click through these elements and recreate them in your app as well, just so working in the responsive editor starts to feel more intuitive!

Thank You for Reading!

I hope this tutorial was helpful! If you have any questions, or if I can clarify anything at all, please let me know in the comments! 😃

For more information on our products and services, visit littlebaytech.com!