Why isn't my element resizing?
You drag the resize handle in Site Designer and nothing happens — or the element resizes but the visible boundary stays the same. Here are the most common causes and how to fix each one.
1. A fixed width is applied directly to the element
The most common cause: an explicit width value in the element’s styles is overriding your resize attempt.
How to check: Select the element and open the Style pane → Dimensions section. Look for a width value that is a fixed pixel number. If one is there, clear it or change it to auto or a percentage.
2. A framework class is setting the width
Framework grid classes like col-md-6 (Bootstrap), medium-6 (Foundation), and col s6 (Materialize) define width with medium-to-high specificity. If one of these classes is applied, dragging the resize handle changes an inline style that may be overridden by the framework class.
How to check: Open the CSS pane for the element. Strikethrough styles indicate overridden rules. If you see your width property struck through, a higher-specificity rule is winning.
Fix: Either remove the framework grid class (use the Content pane → Classes section), or set the correct width in a custom class with equal or higher specificity.
3. A parent container has overflow: hidden
If a parent element has overflow: hidden, the child element may appear clipped at the parent’s boundary even if you have successfully resized it — the content is there, it’s just not visible.
How to check: Select the parent element (use the Outline pane to navigate the parent chain). Open Style pane → Box and look for overflow: hidden.
Fix: Change the parent’s overflow to visible or auto. If the overflow was intentional (e.g., to clip a slider), reconsider whether the child needs to be taller or use overflow: clip to limit the effect to one axis.
4. min-width or max-width is constraining the element
A min-width prevents shrinking below a threshold; a max-width prevents growing beyond one. Both are commonly set by frameworks on containers.
How to check: Open the Style pane → Dimensions section and look for min-width or max-width values.
Fix: Clear or adjust the constraint. For a container that should be fully fluid, set max-width: 100% or remove the property entirely.
5. The element is in a flex row without flex-grow
Inside a flex container with flex-direction: row, child elements don’t grow to fill available space unless flex-grow: 1 (or a value greater than 0) is set. The element will stubbornly stay at its content-defined width.
How to check: Select the parent and open Style pane → Display. If display: flex is set, check the child’s flex-grow property.
Fix: Set flex-grow: 1 on the element you want to grow, or set a specific flex-basis width.
6. The element is in a grid cell with an explicit grid-area
A CSS Grid cell that has been assigned to a specific grid-area or grid-column / grid-row placement is sized by the grid track, not by the element itself. Dragging the resize handle changes the element’s own width, but the grid track is what’s actually visible.
How to check: Open the Style pane → Grid for both the element and its parent. Look for grid-column: 1 / 3 style definitions.
Fix: Adjust the grid track size in the parent container’s Grid settings, or modify the grid-column/grid-row span so the element occupies the right number of tracks.
