Adjusting column width in PageFly happens in the editor, where you select the column and drag its border or use the width settings panel

PageFly is a page builder for Shopify that works with a grid system of rows and columns. When you add content to a page, it sits inside columns, and those columns take up a percentage of the total page width. To change how much space a column uses, you select it, then either drag its edge in the editor or enter a specific width value in the settings panel on the right side of the screen.

The method you use depends on whether you want to adjust by eye or set an exact width. Dragging works fast for rough adjustments. The settings panel works better when you need columns to match a specific size or when you want multiple columns to be exactly equal.

Key Takeaways

  • Select a column by clicking on it in the PageFly editor, then look for the width controls in the right panel or drag the column border directly.
  • PageFly columns are measured as percentages of the page width, so a column set to 50% takes up half the available space.
  • Dragging the column edge in the editor gives you visual feedback but may not produce exact widths; the settings panel lets you enter precise numbers.
  • When you adjust one column in a row, the other columns in that row shift automatically to fill the remaining space.
  • Mobile and desktop widths can be set separately, so a column can be full width on phones and narrower on desktop screens.

How to select and drag a column to resize it

Open your PageFly page in the editor. Find the column you want to resize and click on it once. You should see a blue border around the column and a small handle or resize icon appear at the edge. Move your cursor to the right edge of the column until you see a resize cursor (usually a double-headed arrow), then click and drag left or right to make the column narrower or wider.

As you drag, the adjacent columns in the same row will shrink or expand to accommodate the change. Release the mouse when the column reaches the width you want. This method is fast but may not give you exact pixel or percentage values, so use it when approximate sizing is acceptable.

Using the width settings panel to set exact column size

Click the column once to select it. On the right side of the PageFly editor, a settings panel should appear. Look for a section labeled "Width," "Size," or "Column Settings" — the exact label depends on your PageFly version. You will see a field where you can enter a number, usually as a percentage (for example, 33 for one-third width, or 50 for half width).

Type the width value you want and press Enter. The column will resize to that exact percentage. If you have three columns and want them equal, set each to 33. If you want two equal columns, set each to 50. The remaining columns in the row adjust automatically to keep the total at 100%.

Adjusting column width for mobile and desktop separately

PageFly lets you set different column widths for mobile devices and desktop screens. When you have a column selected, look in the settings panel for a toggle or button that says "Mobile," "Responsive," or shows device icons. Click it to switch to mobile view settings.

Enter a different width value for mobile. For example, you might set a column to 50% on desktop but 100% on mobile so it takes the full width on phones. This is useful when you have multiple columns on desktop but want them to stack vertically on smaller screens. Save your changes, and PageFly will explore the correct width based on the device viewing the page.

What happens when you change one column's width

PageFly rows are built on a flexible grid. When you widen one column, the other columns in that row become narrower to keep the total width at 100%. If you have a row with three equal columns (each 33% wide) and you change the first column to 50%, the remaining two columns will shrink proportionally or you may need to manually adjust them to add up to 100%.

If you want to keep other columns at their current size while changing one, you may need to adjust them individually after resizing the first one. Some versions of PageFly will do this automatically; others require manual adjustment. Check the result by looking at the preview or publishing a draft to see how the columns appear on a real device.

Common reasons column width adjustments don't work as expected

If you drag a column edge and it snaps back to its original size, the column may be locked. Look for a lock icon in the settings panel and unlock it if present. If the width value you enter does not seem to take effect, make sure you pressed Enter after typing the number and that you selected the correct column (not the row or a section inside the column).

Another common issue is that the column width looks different on mobile than on desktop because you have separate mobile settings active. Switch between the desktop and mobile views in the editor to check both. If columns are not dividing space equally when you expect them to, add up the percentages — they should total 100%. If they add to more than 100%, the columns will wrap or overflow.

Using column width to create common page layouts

A two-column layout with a sidebar uses widths like 70% for the main content and 30% for the sidebar. A three-column footer uses 33% for each column. A layout with a narrow left sidebar and wide right content uses 25% and 75%. You can also use unequal widths like 40% and 60% if one section needs more space than the other.

After you set the widths, add your content (text, images, buttons) inside each column. The content will wrap to fit the column width. If content overflows or looks cramped, adjust the column width or reduce the font size and padding of the content inside. Test the layout on mobile by switching to mobile view in the editor or by viewing the published page on a phone.

Frequently Asked Questions

Can I set column width in pixels instead of percentages?

PageFly typically uses percentages for column width because they scale to different screen sizes. Some versions may allow pixel values, but percentages are the standard. If you need a column to be exactly 300 pixels wide, calculate what percentage that is of your page width and use that instead.

What if I want columns to be different widths on mobile than on desktop?

Select the column, then toggle to mobile view in the settings panel. Enter a different width value for mobile. For example, set a column to 50% on desktop and 100% on mobile so it takes the full width on phones. Save the changes and PageFly will explore the correct width based on the device.

How do I make columns equal width?

If you have three columns and want them equal, set each to 33%. For two equal columns, set each to 50%. For four equal columns, set each to 25%. Select each column individually and enter the width in the settings panel, then press Enter.

Why did my column width change when I added content to it?

Content inside a column can affect how it appears visually, but the actual column width percentage should not change. If the column looks narrower, the content inside may have padding or margins that take up space. Check the content settings and reduce padding if needed, or widen the column to give the content more room.

Can I lock a column width so it does not change when I resize other columns?

Some PageFly versions have a lock icon in the column settings. Click it to lock the width, and that column will stay at its set percentage even when you adjust other columns. If your version does not have a lock, you will need to manually adjust each column after resizing to keep them at your desired widths.