# 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.

- Canonical URL: https://adalocado.com/answers/keep-text-dividers-aligned-responsive-adalo
- Verification: Documented from current sources
- Topic: Responsive Design
- Skill level: Intermediate
- Last reviewed: 2026-08-16
- Index status: index-now

## 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.

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.

## 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

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.

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.

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.

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.

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.

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.

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.

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.

## Why it works

- 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.

## Common failures

### 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

- [ ] Shrink the canvas to the narrowest supported mobile width and confirm the text and divider share the intended edges.
- [ ] Test a tablet width and confirm neither child drifts relative to the other or leaves the group boundary.
- [ ] Expand to the widest supported desktop width and confirm the group’s anchor matches the design.
- [ ] Drag continuously between breakpoints and watch for the first pixel range where the components separate.
- [ ] Replace the text with a longer representative value and confirm wrapping or truncation does not create an unexpected visual offset.
- [ ] Publish a test build and compare it at the same viewport widths used in the builder before approving the production screen.
- [ ] Text alignment matches the block’s intended placement
- [ ] Text and divider frames use the intended matching width
- [ ] Both components belong to the same parent group
- [ ] Child scaling and anchoring rules are compatible
- [ ] The parent group has an explicit fixed or scaling behavior
- [ ] The layout is checked at and between all supported widths

## 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.

## Community evidence

### [Layout inconsistencies, tired of them](https://forum.adalo.com/t/layout-inconsistencies-tired-of-them/48448/2)

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.

## Sources

- [Adalo Forum: accepted responsive-layout solution](https://forum.adalo.com/t/layout-inconsistencies-tired-of-them/48448/2)
- [Adalo Help: Grouping Components](https://help.adalo.com/design/designing-your-app/grouping-components)
- [Adalo Help: Shared Layout Settings](https://help.adalo.com/design/designing-your-app/using-the-layout-tab/shared-layout-settings)

Markdown version: https://adalocado.com/answers/keep-text-dividers-aligned-responsive-adalo.md