How can I adjust and move items on a Webflow website if I am unable to resize or reposition them?
TL;DR
- Check the element's Display, Position, and Size settings in the Style panel to enable resizing and repositioning.
- Inspect parent containers, Symbol locks, overflow settings, and use the Navigator panel to adjust element hierarchy and placement.
If you're unable to resize or reposition elements in Webflow, it's likely due to a layout setting, styling restriction, or locked element preventing proper adjustments.
1. Check Element Display Settings
- Select the element and look at the Display setting in the Style panel.
- Common display modes:
- Block or Flex: Allows full width and custom size.
- Inline: Prevents setting width/height — change to Block or Flex.
- If nested inside a Flexbox or Grid, its parent settings may be limiting movement.
2. Inspect Position Settings
- In the Position section of the Style panel, verify how the element is positioned:
- If it’s set to Static, you can’t set top/left/right/bottom values.
- Try changing to Relative, Absolute, or Fixed if you need to nudge it.
- Absolute positioning allows manual placement relative to its parent.
3. Check Size Settings
- Make sure Width and Height are not set to Auto if you want to resize.
- If the values are greyed out, the size is likely determined by parent or content.
- Enter values in px, %, or vh/vw for manual sizing.
4. Review Parent Container
- The element may be restricted by a parent container with rigid settings.
- If inside a Flexbox, manipulate alignment using the parent’s Justify and Align settings.
- If inside a Grid, adjust the row/column settings or move it to a different grid area.
5. Look for Locked or Symbol Elements
- If you can’t click or move the element at all:
- It could be part of a Symbol — double-click or unlink it to edit.
- It might be Nested in a Locked Component like a Navbar or Footer — edit these in the Webflow Navigator or Symbol Manager.
6. Toggle Visibility and Overflow
- Hidden overflow on the parent may prevent selecting or dragging.
- Set parent container's Overflow to Visible under the Layout panel.
- Temporarily hide other overlapping elements if needed to isolate the layer.
7. Use Navigator Panel
- If dragging doesn’t work, move elements using the Navigator (left-side panel).
- Click and drag elements in the tree to change nesting or order.
Summary
To move or resize elements in Webflow, inspect the Display, Position, Size, and Parent Container settings. Use the Navigator Panel if drag-and-drop fails, and ensure elements aren’t locked inside Symbols or components with rigid structure.