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.
Short answer
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.
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.
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.
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
Step 1: 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.
Step 2: 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.
Step 3: 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.
Step 4: Create a real group
Select the related text and divider and make them one group so their spacing and position can be constrained together.
Step 5: 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.
Step 6: 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.
Step 7: 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.
Step 8: 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
Compare their widths, scaling modes, and anchors. A fixed divider paired with scaling text was the concrete mismatch identified later in the source thread.
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.
Inspect the parent group’s scaling and anchor. Child settings cannot correct a parent attached to the wrong edge or center.
Set text alignment to match the block’s placement. Equal frame widths do not make centered text behave like left-aligned text.
Confirm that component is actually inside the group in the Component Tree and fully contained by the intended parent.
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.
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 2024
Sources and status
This page was last reviewed on Aug 16, 2026. Its current status is Documented from current sources.
Verification owner: Accepted forum answer, later diagnostic correction, author confirmation, and current Adalo responsive-layout documentation reviewed by Adalocado. Next review: Oct 16, 2026.
Changelog
Automatically posted from a solved Adalo forum topic; corrections are monitored on the live site.
Automatically organized and maintained by the Adalocado editorial team under the editorial and verification policy.
Report this answer.
Automated Answers still pass evidence and publication checks, but they can be wrong, outdated, unclear, or missing an important boundary. Send the exact correction and the editor will check the live page.
Did this solve your problem?
One-click check
We’ll handle the tech. You can exhale.
Bugs fixed. Updates shipped. Publishing handled.
$97/mo for your first 3 months.
Cancel anytime. That’s about 90% off the usual cost. 🤯
- Bug fixes and troubleshooting
- App updates and integrations
- Publishing and store releases
Bring us the messy version.
Describe what you expected, what happened instead, and what you already tried.
