Make a Bubble page fully responsive, section by section

The theory of responsive design is tidy; a real page is not. Converting a desktop landing page down to 320 pixels means dozens of small decisions, a handful of conditionals per section, and at least one mystery gap demanding detective work. This walkthrough converts the bootcamp landing page section by section (hero, services, testimonials, contact, footer) with the real settings, in the order they were built. The mobile header and hamburger menu are covered separately.

Underneath, the page is a column: each section a full-width outer group carrying the paddings, an inner container holding the content. Side margins are 156 pixels on desktop, 40 on tablet, 20 on mobile, done as padding so section backgrounds still reach the screen edges.

Stacking in Bubble’s responsive engine is mostly one move: a conditional that sets a group’s minimum width to 100% below your chosen breakpoint. The group drops onto its own row, and the parent’s row gap keeps the vertical spacing honest.

The pattern you will reuse in every section

Three techniques repeat all the way down the page, so name them once:

• Copy the padding conditionals. Right-click the grey area of a conditional to copy it, then right-click in the next section’s conditional area and paste. Each section takes seconds instead of minutes.
• Stack with min-width 100%. Applied to groups, not the elements inside them, below the 768 mobile breakpoint.
• Step typography down on the styles. Add conditionals to the shared text styles rather than minting new fonts. Bubble takes line height as a ratio and designs give pixels, so divide: a 56-pixel line height on a 44-pixel font is 56 ÷ 44 = 1.27.

One plans-versus-reality note: the intended shared Group Main style for outer sections was dropped, because each differed slightly (the hero’s extra top padding, the services’ background image, the contact colour change) and styles only earn their keep through reuse; the paddings are applied per group.

Hero

The hero stacks: text left, image right on desktop; image below text on mobile.

1. Paddings. Copy the padding conditionals onto Group Hero, then adjust the values. Desktop: top 128, bottom 64, sides 156. The top is 64 plus an extra 64 because the floating header overlaps the page and pushes everything down. Tablet: top 112 (64 + 48), bottom 48, sides 40. Mobile: the same 112 and 48, sides 20; set them explicitly at mobile too, because unspecified properties revert to the default.
2. Heading 1. On the style, add When Current page width < 1200: size 44, weight 600, line spacing 1.27, letter spacing -1 (minus 2 per cent of 44 is 0.88; round it). Then When Current page width < 768: size 28, weight 700, line spacing 1.14. One style serving every width is the whole point.
3. Subheading 2. No change at tablet (still 600 weight, 24 over 32). Below 768: size 18, line spacing 1.11.
4. Stack the halves. On Group Left: When Current page width < 768, minimum width 100%. Copy the condition onto Group Right.
5. Tighten the gaps. The container’s gap between the stacked halves goes to 32 at mobile; mind which gap you edit, because once a row wraps it is easy to set the column one when you needed the row. Inside Group Left, the row gap drops from 48 to 24, with 16 above the buttons.
6. Stack the buttons. Same trick again: each button gets minimum width 100% below 768.
7. Hunt the minimums. If a text block refuses to hug its content, it has a minimum height (Group Left was carrying a stray 280). Remove them; elements should hug their contents, not force space.
8. The hero image. It is a group with a background image set to crop to fit the element size, so removing its minimum height entirely collapses it (a group with no content occupies no space). Instead, give it breakpointed minimum heights from the design: 600 by default, 447 at tablet, 364 at mobile. The crop keeps the centre of the image in focus at every size.

Services

Three feature cards in a row, stacking to a column on mobile, with no wasted white space at any width.

1. Paddings. Top and bottom 64 on desktop and tablet, with 40 sides at tablet; mobile is 48 top and bottom, 20 sides.
2. Let the cards flex. Remove the fixed widths from the original build: no minimum, fit width to content off, so each card expands to fill its share of the parent. Do it on all three, or you get one responsive card beside two static ones.
3. Gaps on the parent. On Group Cards Row: column gap 32, row gap 24. The gaps stay constant while the cards absorb whatever width remains.
4. Stack below 768. Each card gets When Current page width < 768, minimum width 100%. Type the per cent sign: 100 pixels and 100 per cent are very different mornings.
5. Centre the wrapped text. A one-line heading centres itself through alignment and fit-width-to-content, but once it wraps to two lines the text goes left because the font alignment was still left; centre the text alignment too.
6. When a card will not grow, walk the tree. One wrapper in the hierarchy (Group Overlay here) was missing fit height to content, and that single setting blocked the whole chain. Go layer by layer through the elements tree until you find it.
7. Card heights. With content defining height, cards with different copy lengths will differ. Options: truncate to a character count, write copy to the same length, or set a maximum or fixed height; any is defensible, pick one deliberately.

Testimonials

The layout largely survives; typography and spacing do the work.

1. Paddings. Copy the conditionals across: 48 top and bottom, 20 sides at mobile. Delete any phantom conditions left by earlier fiddling; a stray left padding broke this section’s margins until it went.
2. Section heading (Subheading 1). Below 768: size 20, line spacing 1.2 (24 ÷ 20). Weight stays 600.
3. Body copy (Body Large Regular). Below 768: size 16, line spacing 1.25.
4. The quote. Desktop is a 500-weight semi-bold at 36; mobile drops to a regular 400 weight at 14, line spacing 1.42 (20 ÷ 14). A different animal, not a size tweak, so this one genuinely warrants its own style.
5. Card padding. The design measures 68, but that includes the card’s 4-pixel border, so the real padding is 64; below 768 it drops to 28, again 4 short of the visual 32.
6. Section gap. Tighten from 32 to 24 below 768: breathing space on big screens, compactness on phones.

Contact form

The contact section stacks its form fields, and on mobile the white card dissolves into the page.

1. Paddings and the card. Tablet: top and bottom 32. Below 768, adapt the design slightly: background becomes the off-white shade, corner roundness 0, border none, top padding 32, side padding 0. The form stops being a card and becomes the page.
2. Heading 2. Two conditionals on the style. Tablet band, When Current page width < 1200 and Current page width >= 768: size 32, line spacing 1.25 (40 ÷ 32), letter spacing -0.64 (minus 2 per cent of 32). Below 768: size 24, line spacing 1.33, weight 600.
3. Labels. Centre the font alignment on centred labels (the same wrap-to-two-lines reason as the services cards); the 14-pixel captions are fine.
4. Stack the fields. The name group, the topic group and the submit button each get When Current page width < 768, minimum width 100%, with the conditions on the groups, not the inputs inside them; the message field already spans the width.
5. Row gap. On the form’s container, the gap drops from 48 to 32 below 768.

Contact details

The address, phone and email row under the form is honestly the trickiest part of the page, because space between with unequal-width items pushes the middle one off centre: equal spaces, unequal widths, drifting middle.

1. Equalise the widths. Give each of the three detail groups a width of 260; now space-between distributes honestly and the middle item sits truly centred.
2. Structure each detail. A spacing gap of 24 between the three groups, and each icon-plus-text pair wrapped in its own inner row container with 12-pixel gaps. Watch the elements tree as you group; a wrapper created at the wrong level ruins the layout.
3. Tablet band (>= 768 and < 992): a maximum width of 120 on the inner row container so the text wraps beside its icon, and vertical alignment top so icons and first lines align. Maximum, not minimum: a minimum cannot make anything narrower.
4. Mobile. Container alignment goes left and the inner containers fit width to content; each detail sits on its own line, left-aligned.
5. Styles have limits here. A Group Contact Detail style helps with shared appearance, but many layout properties simply cannot live on a style, so these conditions get copied element to element.
6. Edge protection. Keep 40 pixels of side padding on the inner container in the band just above 768 so the details never touch the screen edges.

Expect trial and error here; it took several rounds on the course too.

Footer

The footer stacks, and the divider line moves.

1. Paddings. Copy the side-padding conditionals across. Top and bottom stay 48 at every width, so those need no conditional at all; delete the redundant ones.
2. The logo. An image cannot sensibly be 100% wide, so wrap it in a row container, Group Logo, which gets When Current page width < 768, width 100%; with fit width to content on, the logo centres itself in the full-width row.
3. The nav links. Each footer text gets width 100% below 768, with the font alignment set to centre. A row gap of 32 on the nav group spaces the stacked links; use the gap, not per-element padding.
4. Move the divider, adaptively. On desktop the divider line sits above the social icons; on mobile the socials move above the line. Rather than moving anything, hide the original shape divider below 768 and show a duplicate, Shape Divider 2, placed in the mobile position, visible only below 768 and 100% wide.
5. Collapse when hidden, always. The first attempt left a 64-pixel gap where 32 was expected: the hidden divider was invisible but not collapsed, so its row still occupied space and doubled the gap. A gap at exactly twice your setting almost always means this.
6. Socials. The icons group gets the same 100% width below 768 with centred contents, and the bottom group gets a row gap of 32.

Flick through the whole page in preview after each section; sometimes you catch what you broke earlier.

Finishing touches

A working responsive page is not quite a finished one. The last pass covers four things.

A troubleshooting method. When responsive elements misbehave, resist random clicking. Reveal the problem element in the elements tree, confirm the hierarchy is what you think it is, then audit every parent and child: container layout, fixed widths or heights, stray minimums and maximums (the most common culprit), fit width and height to content, and finally margins someone snuck on when no one was watching. An app configured at random can take half an hour per bug; one built on consistent container rules takes minutes.

Kill what does not serve the user. The services section had an entrance animation that left a blank white space on load. Cool is not the bar; the section should simply be there. Visible on page load, workflow deleted.

Make the form honest. The contact form submitted happily with every field empty. Mark the three inputs this input should not be empty: the button sits disabled until all fields are valid, then turns to its clickable primary state, and the toast confirms the submission.

The menu shadow trick. Opening the mobile menu after scrolling revealed an ugly gap above it. Two fixes together: the hamburger’s workflow now scrolls back to the hero when the menu opens, and a shape at the top of the group focus impersonates the header’s shadow: white background at 100%, the header’s exact box shadow (outset, 2 horizontal, 7 vertical, 12 blur, #222222 at 8 per cent), a fixed height of 100, and a negative margin pushing the shape up out of sight so only its shadow bleeds into the menu.

Then tidy up. Delete the settings and conditions you no longer need, because some poor developer will come along later and ask what you were thinking. And accept the verdict on the shared outer-group style: styles are for reuse, and a clean one-off beats a forced abstraction.

This skill in the AI era

This module is really training in reading a layout system: knowing that a mystery gap means an uncollapsed hidden element, that a group refusing to shrink means a stray minimum, that spacing belongs on parents. That diagnostic eye transfers wholesale to AI-assisted development, where Claude Code writes the flexbox but someone still has to specify the breakpoints and catch the tablet view nobody tested; the builders who made the jump from Bubble to AI coding lean on it daily. It is also most of what we do on Bubble rescue and migration work, where inherited apps arrive with these exact problems configured at random.