How to Change Column Width in WordPress (Beginner’s Guide)

Your columns in WordPress don’t have to stay the way they are. If something feels too squished or too wide, you can fix it. I’ll show you how.

This guide is for beginners. You don’t need to know code. You just need to know where to click and what to look for. I’ll explain why column width matters, how to change it, and how to update old posts that already use columns.

If your layout feels off, your readers will feel it too. Let’s fix that…step by step, right inside your WordPress editor:

Why change column width in WordPress

The column block in WordPress can be very useful when designing your pages. It enables you to display elements side by side.

👉 For example, you might want to show an image with an explanation next to it (rather than below it):

If you select a two- or three-column block, WordPress creates columns of equal width. While this can help you achieve symmetry in your design, it is not always ideal.

👉 For example, you might want the column that contains an image to be a bit narrower, so you can allot more space for the accompanying paragraph. Likewise, you could use narrower columns for small elements, like icons, and wider ones for more important content, like headings:

Depending on the content, adjusting the width of columns could help make your page more responsive on mobile devices. For instance, videos and images might look better on smaller devices if you put them in a wide-width column.

How to change column width in WordPress

Now, let’s look at how to change column width in WordPress. Start by adding the Column block to your page.

You can do that by starting to type “/col” somewhere on the page – WordPress will suggest the column block automatically. Or, you can pick the block from the left sidebar menu.

Then select your layout:

For this tutorial, we’ll be using a three-column block with equal spacing. Once you add the block, click on the align icon in the toolbar and choose your preferred alignment. For example, you might opt for wide width, or full:

Important; this selection doesn’t change the width of the individual columns yet, but the width of the entire column block.

Now, let’s look at how to adjust the width of individual columns within the block.

Select the column you want to edit.

Then, in the Settings panel on the left, look for the Width field and enter your preferred dimension:

We changed the width of all three columns in the block, then added a photo to each column. Here’s what it looks like now:

As you can see, the WordPress “change column width” feature is very straightforward! If you’re not happy with the default column layouts, you can simply adjust the width of each individual column within the block.

How to change column width later

First off, no column width you’ve set has to stay like that forever. You can easily change any column widths later as well.

Here’s how to do that:

Let’s say you have two columns looking something like this:

If you want to change the width of any of them, first click into the column block – meaning click on the content that’s inside. Then click on the parent block selector that will appear in top left; this one:

This will switch you to column controls. Now, in the right sidebar, you can adjust the width of the column (make sure you’re in the Block tab):

Just remember to adjust the widths of the other columns as well. For example, if you’ve had two columns like I have in the screenshot above – one at 33%, other at 66% – then if I change the width of the first one to 50%, the other one will still remain at 66%, which will not add up.

Conclusion 🧐

Once you add a Column block to your page, you can choose between multiple width options. Then, you can set a custom width for each individual column within the block using the settings panel in the editor.

Do you have any questions about how to adjust column width in WordPress? Let us know in the comments section below!