Use the Columns block to arrange related content side by side while allowing it to adapt to smaller screens. Build the structure with the editor's layout controls instead of forcing desktop-sized widths onto individual paragraphs and images.
IN THIS ARTICLE
01 Plan a useful reading order
Choose a small number of columns appropriate to the content. A three-item service overview may work well, while long paragraphs in many narrow columns become difficult to read. Decide the order in which the content should appear when stacked on a phone; that order should make sense without relying on desktop positioning.
02 Create the structure
- Insert Columns and choose a suitable initial layout.
- Add the heading, text, image and button for each item inside its own Column. Use List View to confirm that blocks are nested in the intended column.
- Select the parent Columns block to adjust overall layout and spacing. Use supported proportional sizing where available rather than arbitrary fixed pixel widths.
- Review the option controlling stacking on mobile and keep a layout that remains usable at narrow widths.
- Save a draft and preview both wide and narrow screens with realistic content lengths.
Why do columns overflow on smaller screens?
Long unbroken URLs, oversized images and fixed-width embeds can force a column beyond its available space. Correct that content instead of reducing the entire page's font size. Keep the gap between columns and the padding inside cards conceptually separate so spacing stays consistent.
If one card is much taller than the others, decide whether unequal height is acceptable or whether the content should be edited. Adding blank paragraphs to shorter cards usually creates fragile spacing that fails on mobile.
03 Verify the published layout
Check the public page at several widths and with increased text size. Read the stacked sequence from top to bottom and test each link. When a child block appears outside its card, inspect List View and move it into the correct parent.
If the theme restricts wide or full alignment, use the widths it supports or review the template. Columns cannot reliably bypass a deliberately constrained page container by applying increasingly large values to their children.