How do you keep text and dividers aligned in responsive Adalo layouts?
Group related text and dividers, give their frames matching geometry and layout rules, and test the group continuously across responsive widths.
Group the text and divider, make their widths and text alignment consistent, then give both children the same scaling and anchoring behavior before choosing the parent group’s responsive behavior.
Responsive alignment is a constraint problem, not a publishing problem. Start by giving the text and divider matching geometry, then place them under one parent and make their scaling and anchoring rules agree. If one child stays fixed while the other scales, they can look correct at one width and drift everywhere else. Use the Component Tree to verify the parent-child structure. True groups expose Scale with Group; rectangle auto-groups use the current Scales with Parent behavior. After the children agree, decide what the parent should do: stay fixed and anchor to a side or center, or scale with the screen. Finally, resize continuously rather than checking only one desktop and one mobile preset. Include realistic long text and the actual published targets so wrapping, font rendering, and intermediate widths do not reintroduce the misalignment.
The intended outcome
Text and its underline or divider stay visually aligned as a responsive Adalo screen grows and shrinks instead of drifting at widths other than the design canvas.
Requirements
- A responsive Adalo app or a copy of the affected screen
- The text and divider as separate selectable components
- Access to the Component Tree and each component’s Layout tab
- A target mobile, tablet, and desktop width for verification
Step by step
- 01
Reproduce the drift
Resize the builder canvas narrower and wider before changing anything. Note the first width at which the text and divider stop lining up.
- 02
Match the intended text alignment
If the block is positioned from the left, use left-aligned text; if it is centered, use centered text. Text alignment must agree with the visual placement of its frame.
- 03
Match the component widths
Give the text frame and divider the same width when they are intended to share edges. Do not judge equality only by their appearance at one canvas width.
- 04
Create a real group
Select the related text and divider and make them one group so their spacing and position can be constrained together.
- 05
Verify group membership
Use the Component Tree and group boundary to confirm both components are children of the group. A nearby component outside the group will still respond independently.
- 06
Align the child layout rules
In each child’s Layout tab, choose the same scaling and compatible anchoring. For a true group, Scale with Group keeps the children following the parent; inside a rectangle, use the current Scales with Parent behavior instead.
- 07
Choose the parent behavior
Set the group to stay fixed when the block should keep its width, or scale with the screen when it should stretch. Anchor the group to the side or center that matches the design; do not mix contradictory goals.
- 08
Test before publishing
Drag through intermediate widths and use the mobile, tablet, and desktop previews. Publish only after the text, divider, and group remain aligned throughout the supported range.
The underlying logic
Components that look aligned at one width can diverge when one stays fixed and another scales; matching their frames and responsive rules removes that disagreement.
A group gives related components one parent coordinate system, which preserves their relative spacing while the parent responds to screen width.
Text alignment affects where glyphs sit inside the text frame, while anchoring affects where the frame sits inside its parent. Both layers must describe the same visual intent.
Continuous resizing catches failures between named breakpoints that a single desktop or mobile screenshot can hide.
What still needs checking?
- This is a forum-native answer with no Adalocado video.
- Current Responsive Builder documentation distinguishes true groups from rectangle auto-groups and uses Scales with Parent inside rectangles.
- Current shared-layout documentation still defines scaling separately from anchoring and documents fixed, screen-scaling, and group-scaling behavior.
Common failure modes
The text and divider align only at the builder’s current width
Compare their widths, scaling modes, and anchors. A fixed divider paired with scaling text was the concrete mismatch identified later in the source thread.
Scale with Group is not available
Check whether the parent is a rectangle auto-group rather than a true group. Current Adalo documentation uses Scales with Parent for components inside rectangles.
The children align but the whole block shifts
Inspect the parent group’s scaling and anchor. Child settings cannot correct a parent attached to the wrong edge or center.
The text looks offset inside an equal-width frame
Set text alignment to match the block’s placement. Equal frame widths do not make centered text behave like left-aligned text.
One child is unaffected by group changes
Confirm that component is actually inside the group in the Component Tree and fully contained by the intended parent.
Republishing does not change the misalignment
Return to the builder and reproduce the issue while resizing. Republishing cannot reconcile components that still have conflicting layout rules.
Testing checklist
0 of 12 checked on this device
Current limitations
- The accepted answer was posted in July 2024; a later reply supplied a more specific diagnosis, and the original author said the combined guidance helped.
- Current Adalo documentation corroborates grouping, scaling, and anchoring behavior; Adalocado has not reproduced the source screen hands-on.
- Responsive Builder and Legacy Builder use different layout controls, so these steps target the current Responsive Builder documentation.
- A fixed-width group intentionally will not stretch with the screen; choose scaling when the design requires shared edges to expand.
- Longer or localized text can wrap and change height even when horizontal alignment is correct.
- Fonts and viewport sizes can render differently across web and native targets, so final verification must include the actual publishing targets.
Current evidence screenshots have not yet been added. Treat the guidance as documented or legacy material according to the status shown above.
What the Adalo community is reporting
These are concise editorial summaries of public forum posts—not endorsements or independently reproduced results.
Layout inconsistencies, tired of them
Group the text and underline, make their widths and alignment consistent, and use matching scaling and anchoring. A later reply identified the concrete fixed-versus-scaling mismatch, and the author confirmed the guidance helped.
Boundary: The exact source layout was diagnosed from media attached to the forum; this answer keeps only the reusable, text-verifiable layout rules.
matthiastonitz (question), desmet (accepted answer), and adalojosh (later correction) · July 2024Sources and status
This page was last reviewed on Aug 16, 2026. Its current status is Documented from current sources.
Verification owner: Automatically organized from an accepted forum answer; monitored for corrections. Next review: Oct 16, 2026.
Changelog
Automatically posted from a solved Adalo forum topic; corrections are monitored on the live site.
Report this answer.
Forum answers post automatically. If a step is wrong, outdated, unclear, or missing an important boundary, send the exact correction and the editor will check the live page.
Report a problemDid this solve your problem?
Never deal with an Adalo problem again.
Rehost becomes the monthly team behind your app. Fixes, releases, integrations, and ongoing changes have an owner.
See monthly managementBring us the messy version.
Describe what you expected, what happened instead, and what you already tried.
Ask Adalocado 💬
