You want a photo on the left and a short description on the right, or three boxes in a row for your three main services. On your laptop it looks right after some fiddling. Then you check on your phone and the boxes are squeezed into thin strips, or the photo has jumped below text it was supposed to sit beside.
The WordPress Columns block is the built-in way to put content side by side, and it handles phones better than most people expect once its settings make sense. This post covers adding it, setting widths, spacing and alignment, what happens on small screens, and when a different block does the job better.
How the Columns block is put together
A Columns block is a container. Inside it sits one Column block for each column, and inside each Column you can put anything: paragraphs, headings, images, buttons, even a form. That gives you three levels to keep in mind:
- Columns (the outer block): how many columns there are, whether they stack on phones, the gap between them and the background behind all of them.
- Column (each inner block): that column’s width, its vertical alignment and its own background or padding.
- The content inside each column, which you edit as usual.
Almost every frustration with columns comes from having the wrong level selected. Open List View from the top toolbar (our block editor guide for owners explains it) and you can see all three levels as a tree. Click the one you mean, and the sidebar shows its settings.
Adding two columns in WordPress
- Click where you want the columns to go, then open the block inserter with the blue + and search for “Columns”. Or type /columns in an empty paragraph and press Enter.
- WordPress asks you to choose a layout. The options are labelled by width: 100, 50 / 50, 33 / 66, 66 / 33, 33 / 33 / 33 and 25 / 50 / 25. Pick 50 / 50 for two equal columns, or 33 / 66 for a narrow column beside a wide one.
- Each column now shows a small + button. Click it to add the first block in that column, such as an Image in the left one and a Heading and Paragraph in the right.
- Keep adding blocks inside each column. Press Enter at the end of a paragraph to add another one in the same column.
- Save the draft and preview it at desktop and mobile sizes before publishing.
To change how many columns there are, select the outer Columns block and use the Columns setting in the sidebar. Reducing the number removes columns from the end, along with everything in them, so move any content you want to keep first.
Setting column widths
The starting layouts cover most needs. For anything else:
- Select one Column (not the outer Columns block). The “Select parent” button on the toolbar, or List View, helps here.
- In the sidebar, find the Width setting. Type a number and choose a unit from the small dropdown next to it. A percentage is the safest choice, because it scales with the screen.
- Columns without a width share the space left over. So in a two-column layout you can set only the left one to a third, and the right one fills the rest.
Avoid fixed pixel widths unless you have a specific reason. A column set to a pixel width can stay wide on a tablet while its neighbour gets crushed.
Spacing, alignment and backgrounds
The gap between columns
Select the outer Columns block and look in the sidebar for a Dimensions or Spacing panel with a Block spacing control. That sets the gutter between columns. If you cannot see it, open the panel’s three-dot menu, where some options are hidden by default. Not every theme enables every spacing control.
Lining up content vertically
When one column is taller than another, the shorter one sits at the top by default. The Columns block toolbar has a vertical alignment button that lines all columns up at the top, middle or bottom. Each Column also has its own, if only one needs to move.
Backgrounds and padding
To make each column look like a card, select a Column and give it a background colour in the Styles tab or Color panel, then add padding under Dimensions so the text does not touch the edges. For a background behind the whole row, set it on the outer Columns block instead. Check that text on a coloured background is easy to read. The editor sometimes warns you when a colour pair has low contrast.
What happens to columns on phones
By default, the WordPress Columns block stacks its columns on narrow screens: the first column on top, the second below it, and so on. This is controlled by the Stack on mobile toggle on the outer Columns block, and for nearly every layout it should stay on.
Two things catch people out:
- Order is fixed. Stacking always follows the left-to-right order. If you alternate rows (image left, then image right) the phone view shows image, text, text, image. The core block has no setting to reverse the order on phones, so for alternating layouts consider putting the image first in every row, or using Media & Text blocks, which handle that pattern more neatly.
- Turning stacking off keeps columns side by side on phones. That is fine for two small icons or a short pair of buttons, and painful for anything with text, which ends up a few words wide.
Tablet widths can fall between the two, and how your theme treats them varies. Check your page on a real phone and, if you can, a tablet. If the layout breaks in ways these settings do not explain, our post on fixing a site that looks wrong on mobile covers the theme and CSS causes.
Row, Stack, Grid and Media & Text: when another block fits better
Columns are not the only way to arrange blocks side by side, and sometimes they are the heavier choice.
| Block | Best for | How it behaves |
|---|---|---|
| Columns | Two to four sections with real content each | Set widths, stacks on phones |
| Row (a Group variation) | Small items in a line: a logo beside a button, a row of badges | Items sit next to each other at their natural size, and can wrap |
| Stack (a Group variation) | Blocks one above another with even spacing | Vertical, with a single gap setting |
| Grid (a Group variation, in recent versions) | Many equal cards, such as service boxes or team members | In its automatic mode, fills rows and wraps to fewer columns on smaller screens |
| Media & Text | One image beside one block of text | Image left or right, stacks on phones |
To get Row, Stack or Grid, search for them by name in the inserter. For a single image beside text, using Media & Text instead is often simpler than two columns. If you build the same column section on several pages, save it once as a pattern, as described in our guide to reusing sections with block patterns.
Common column problems and their fixes
- The column will not get narrower. Something inside it has a fixed width, often an image set to a large pixel size or a long unbroken web address. Resize the image to fill its column instead.
- Columns inside columns inside columns. Nesting more than one level deep makes editing confusing and phones unpredictable. Use a Grid or separate Columns blocks instead.
- A page builder section that looks like columns but does not respond to these settings. Builders such as Elementor have their own layout system, and the Columns block settings do not apply there.
- Uneven card heights. Cards in a row usually look tidier when the text in each is a similar length. Vertical alignment cannot fix very different amounts of content.
Page layout is only one corner of looking after a site. Everything beyond it, from settings to user accounts, is mapped out in our WordPress site owner’s handbook.
Frequently asked questions
How many columns can the Columns block have?
The sidebar control lets you choose up to six. In practice, more than three or four makes each column too narrow for real text on a laptop, and all of them stack into a long list on phones anyway. For many small items, a Grid usually works better than a six-column layout.
Can I hide one column on mobile?
In recent versions, yes. Select the Column, open its three-dot menu, choose Hide and tick Mobile, or whichever screen sizes it should not appear on. Older versions have no such setting. Use it sparingly, because content hidden on phones is content most visitors never see.
What happens to my columns if I change theme?
The Columns block is part of WordPress, so the columns, their widths and their content stay in the page. Colours, fonts and spacing chosen from the old theme’s presets may change, because the new theme supplies its own. Preview your main pages on the new theme before switching on the live site.
Can I turn an existing set of blocks into columns?
Yes. Add a Columns block next to the existing content, then drag each block into a column using List View, or cut and paste them in. Moving blocks one at a time is slower than rebuilding, but it keeps your text, links and image settings exactly as they were.
When a layout needs more than blocks offer, such as a custom design for service cards or a section that behaves differently on tablets, our WordPress theme customisation work covers changes of that kind.
Next in this series: How to Add a Button in WordPress (Call, WhatsApp, Page)
