PageFly is one of the most used page builders for Shopify, and column width is one of the first things store owners try to change. A two-column row where the text column is too narrow, an image column that crowds the buy button, a section that refuses to go full width: all of these come down to the same few settings.
The catch is that PageFly has two editors, and the controls live in different places in each one. This guide covers both, so you can find the right setting in under a minute instead of clicking through every panel.
The short answer
In the Legacy editor, click the column on the page canvas and drag its edge left or right. The column next to it shrinks or grows by the same amount, so the row keeps its total width.
In the Gen 2 Flex editor, select the Flex block and set its width in the Styling tab. If the whole section looks capped, change the section Content width from Max width to Fill container first, because a section limit overrides anything you set on a column.
Which PageFly editor are you using?
PageFly pages are built in one of two editors. The Legacy editor builds pages from three elements: Section, Row, and Column. The Gen 2 editor, also called the Flex editor, builds pages from a Blank Section and Blank Blocks that you arrange like flex items.
Look at the left panel of your page. If you see Section, Row, and Column, you are in the Legacy editor and the drag method below applies. If you see Blank Section and Blank Block, you are in the Gen 2 editor and the width settings below apply. Note that Gen 2 Layout is available only on PageFly pay-as-you-go slot plans, so older pages are usually Legacy.
Mixing up the two editors is the most common reason people cannot find the width setting. Once you know which one you are in, the rest is straightforward.
Drag the column edge in the Legacy editor
Open your PageFly page and click the column you want to resize on the canvas. Hover over the edge between two columns until the drag handle appears, then drag it left or right to the width you want.
PageFly resizes columns as a pair. When you widen one column, the column next to it narrows by the same amount, and the row width does not change. That is by design: it keeps the row aligned to the section instead of pushing content off the edge.
If you want a specific split, such as a wide text column next to a narrow image column, drag the edge until the split looks right, then check the result on the live preview. There is no number field for the drag method, so exact percentages need the Custom CSS option covered below.
You can also control how many columns share a row. Select the Row, open the General tab, and set Columns Per Line. The maximum is 12 columns per line on desktop, 6 on tablet, and 4 on mobile. Changing this setting resizes all columns in the row equally, and you can still drag each column individually afterwards.
One quirk to know: if the number of columns does not divide evenly into the columns per line, the leftover column stretches to full width on its own line. For example, 4 columns with columns per line set to 3 gives you three columns on the first line and one full-width column on the second. If a column suddenly looks far too wide, check this setting first.
Column spacing also eats into the available width. The Row setting defaults to 30 px of spacing between columns, and you can lower it if your columns feel cramped.
Set column width in the Gen 2 Flex editor
In the Gen 2 editor, columns are Flex blocks arranged inside a Blank Section. Select the block on the canvas, open the Styling tab, and set its width there. The Fixed width option lets you set a specific width for the element instead of letting it share the row evenly.
To build a multi-column row, arrange Flex blocks horizontally inside the same section. To build rows, arrange them vertically. You can also group elements into a Flex block by holding Ctrl on Windows or Command on Mac while selecting them.
The section itself has a Content width setting in the Styling tab. Max width is enabled by default and wraps the section content in a fixed width that you can customize. Fill container lets the content expand to the full width of the section. If your columns will not go wider, this section setting is usually the cap, not the column.
For the section height, the same Styling tab offers Fill container, Hug content, and Fixed width. Height does not affect column width, but a fixed height combined with narrow columns is a common cause of cut-off text, so check both together.
Make the section full width first
Before you resize any column, check whether the section itself is capped. A column can never be wider than the section that holds it, so widening a column inside a fixed-width section does nothing visible.
In the Legacy editor, select the Section, open the General tab, and look for Set Fixed Width. It is enabled by default and wraps the section content in a fixed width. Turn it off and the content expands to the full width of the section. PageFly has a Layout help page that documents the Section, Row, and Column settings in full.
In the Gen 2 editor, select the Blank Section and set Content width to Fill container in the Styling tab, as covered above.
If the page still looks narrow after that, the limit may be in your theme rather than PageFly. Some themes cap the page width for PageFly pages, and that cap is a theme setting, not a PageFly setting. Check the theme editor before you keep fighting the PageFly panels.
Set different widths on mobile and tablet
Column widths are responsive, so a split that looks great on desktop can look broken on a phone. PageFly lets you switch the editor preview between desktop, tablet, and mobile, and the Columns Per Line limit changes per device: 12 on desktop, 6 on tablet, 4 on mobile.
On mobile, a two-column row often works better as a single stacked column. Select the Row, switch to the mobile view, and lower the columns per line so the columns stack instead of squeezing side by side. Then check the text size and image height in the same view, because a column that is fine at desktop width can cut off content at mobile width.
Always preview every width change on all three device views before you publish. A layout that only gets checked on desktop is the most common source of mobile complaints after a PageFly edit.
When a column will not resize
If dragging does nothing, or the width snaps back, work through this short checklist. First, check the content inside the column. An image, a video, or a long unbroken word that is wider than the column will hold it open, and the column cannot shrink below its widest content. Shrink or replace the inner element first.
Second, check the section cap from the previous section. A fixed-width section limits every column inside it, no matter what you drag.
Third, check for custom CSS. A width, min-width, or flex rule set on the column, the row, or the theme stylesheet can override the drag handle. PageFly has a Custom CSS option in the Styling tab, and your theme base.css can also hold rules that affect PageFly pages. A single min-width rule is often the whole problem.
Fourth, if you need an exact width rather than a drag approximation, use Custom CSS in PageFly. Setting the column width with a percentage or a flex-basis value gives you a precise split, such as 70 percent text and 30 percent image, and it also applies before the page finishes loading. That matters on mobile, where some users report a brief width jump while the page loads; a CSS rule in place from the start avoids it.
If the layout keeps fighting back and the page is part of a bigger theme job, a Shopify theme customization from $35 an hour can sort the CSS and the section structure in one pass instead of a dozen small edits.
Frequently asked questions
Can I set an exact pixel width for a PageFly column?
Yes. In the Gen 2 editor, use the Fixed width option in the Styling tab. In the Legacy editor, dragging sets a relative width, so use the Custom CSS option for an exact pixel or percentage value.
Why does changing one column change the next one?
Columns in a row share the row width. PageFly keeps the total row width fixed, so widening one column narrows its neighbour by the same amount. This keeps the row aligned instead of pushing content off the page.
How do I make two columns different widths, like 70 percent text and 30 percent image?
Drag the edge between the columns until the split looks right, or set the widths with Custom CSS for a precise split. Check the result on tablet and mobile afterwards, because a wide split on desktop can crowd the narrow column on smaller screens.
Do PageFly column widths carry over to mobile?
Column layout is responsive and set per device view. Switch to the mobile preview and set the columns per line for mobile, with a maximum of 4. A two-column desktop row usually works best stacked into one column on mobile.
Will changing column widths hurt my SEO?
No. Column width is presentation only: it does not change your URLs, your content, or your page structure. A broken mobile layout can still hurt conversions, so check the mobile view before you publish.
Saqib Ali runs Globe Skillz, a Shopify SEO studio with development built in. Since 2019 he has worked on 180+ projects for merchants in 42 countries. More about Saqib →