How to change column width in PageFly

In PageFly, you adjust column width by selecting the column, opening the width settings in the right panel, and entering a specific percentage or pixel value. The exact steps depend on whether you are working with a pre-built section or a custom layout, but the core method is the same across both.

PageFly measures column width as a percentage of the total container width. A two-column layout might split at 50% and 50%, while a three-column layout could be 33%, 33%, and 34%. You can change these proportions to make one column wider and another narrower, or stack columns unevenly depending on your design.

Key Takeaways

  • Click the column itself (not the content inside it) to select it, then look for the width field in the right sidebar under the Design or Layout tab.
  • PageFly displays width as a percentage, and the total of all columns in a row must equal 100% or the layout will break.
  • Mobile responsiveness is separate from desktop width — you can set different column widths for mobile, tablet, and desktop views using the device toggle at the top of the editor.
  • If a column width change does not appear to work, check that you have selected the column itself and not a text block or image inside it.

Selecting the column versus selecting content inside it

The most common mistake is clicking on text or an image inside the column instead of the column border itself. When you click text, PageFly selects the text element, and the right panel shows text formatting options — not width controls.

To select the column, click on the thin border or edge of the column, or click in the empty space at the very top or bottom of the column. You should see a blue outline around the entire column, and the right panel should show options labeled "Design," "Layout," or "Advanced." The width field appears in one of these tabs, usually under Layout or Design depending on your PageFly version.

Finding and using the width field

Once the column is selected, look at the right sidebar. If you see tabs at the top (Design, Layout, Advanced), click the Layout tab first — width controls usually live there. If there are no tabs, scroll down in the right panel until you see a field labeled "Width," "Column Width," or sometimes just a percentage input box.

Click the width field and enter a number. PageFly accepts percentages (type 50 for 50%) or pixels (type 300px for 300 pixels). Percentages are more common because they scale with the screen size, but pixels work if you need a fixed width. After you enter the number, press Enter or click elsewhere to apply the change.

Keeping column widths balanced in a row

If you have multiple columns in the same row, their widths must add up to 100% or the layout breaks. A two-column row at 50% and 50% works. If you change one to 60%, the other should become 40%. If you set both to 60%, one column will wrap to a new line or overlap.

PageFly sometimes auto-adjusts the other columns when you change one, but not always. If your layout looks wrong after a width change, click each column in the row and check its width value. Add them up mentally — they should total 100%. If they do not, adjust one or more columns until they do.

Setting different widths for mobile and tablet

PageFly lets you set different column widths for different screen sizes. At the top of the editor, you should see icons or buttons for Desktop, Tablet, and Mobile views. Click the Mobile button, and any width changes you make will apply only to mobile screens. Desktop widths stay the same.

This is useful because a three-column layout that works on desktop might be too cramped on a phone. You can set columns to stack (100% width each, one per row) on mobile while keeping them side-by-side on desktop. Select the column, change its width to 100%, and that change applies only to the mobile view you are currently editing.

Troubleshooting width changes that do not appear

If you change a column width and nothing happens, first check that you selected the column itself. Click the column border again and confirm the blue outline appears around the entire column, not just a text box inside it.

Second, check that the width value you entered is valid. PageFly accepts whole numbers (50) or decimals (50.5), and percentages should not exceed 100% for a single column in a row. If you entered something like "50 percent" or "50 %", PageFly may not recognize it — use just the number for percentages or add "px" for pixels.

Third, if you are editing on mobile or tablet view, the change applies only to that view. Switch to Desktop view to confirm the desktop width is what you expect. If you want to change the desktop layout, you must be in Desktop view when you adjust the width.

When to use pixels instead of percentages

Percentages are the default because they adapt to different screen sizes. But pixels are useful when you have a fixed-width element — like a sidebar that should always be 300 pixels wide — and you want the other column to fill the remaining space.

If you use pixels, the column width stays the same on all screen sizes, which can make your layout too narrow on phones. Use pixels sparingly, and always test your page on mobile to make sure it still looks right. Most Shopify stores work better with percentages because they scale automatically.

Frequently Asked Questions

Can I make one column wider than the others without changing all of them?

Yes. If you have a three-column layout at 33%, 33%, 33%, you can change the first to 50% and the second to 25%, keeping the third at 25%. The total must still equal 100%. PageFly does not automatically adjust the others, so you have to change each one manually.

What happens if my column widths add up to more than 100%?

One or more columns will wrap to a new line below, or they will overlap. The layout breaks visually. Check each column in the row and adjust them so the total is exactly 100%. If you are unsure which column is wrong, change them one at a time and watch the preview.

Do I need to change column width on mobile, or does it happen automatically?

It does not happen automatically. Desktop widths do not apply to mobile. You must switch to Mobile view and set widths separately if you want columns to stack or resize on phones. Many designers set mobile columns to 100% width so each column takes a full row on small screens.

Can I use decimal percentages like 33.33%?

Yes, PageFly accepts decimals. This is useful for three-column layouts where 33.33% + 33.33% + 33.34% = 100%. Use decimals if you need precise splits, but whole numbers usually work fine for most designs.

Why does my column width look different on the live store than in the editor?

The editor preview may not match the live store exactly due to browser zoom, screen resolution, or cached CSS. Publish your changes and view the page on the actual store in a new browser window. If the width is still wrong, check that you are viewing it on the correct device (mobile, tablet, or desktop) and that the width you set applies to that view.