How to Adjust Column Width in Shopify PageFly (Step-By-Step Guide for 2026)
If you use PageFly to design Shopify pages you have probably needed to adjust column widths to perfect your layout. Whether you are building landing pages product sections or custom layouts controlling column width is essential for clean design and better conversions.
In this guide you will learn exactly how to adjust column width in PageFly using built-in tools and optional CSS for advanced customization.
✅ Quick Answer
To adjust column width in Shopify PageFly select the column in the PageFly editor then go to Right Sidebar → General → Width and set a custom width using percentages or pixels. You can also drag the vertical divider between columns to resize visually or apply custom CSS for more advanced control.
How to Adjust Column Width in Shopify PageFly
Table of Contents
What Is PageFly?
Why Adjusting Column Width Matters
Methods to Adjust Column Width in PageFly
Editor width settings
Drag-to-resize
Custom CSS method
Examples of Popular Column Layout Adjustments
Common Mistakes to Avoid
FAQs
Conclusion
What Is PageFly?
PageFly is a drag-and-drop Shopify page builder that lets store owners design custom pages without coding. You can create:
Product pages
Landing pages
About pages
Homepages
Collection pages
PageFly’s layout system uses rows and columns giving you flexible control over how your content looks — including the width of each column.
Why Adjusting Column Width Matters
Proper column width helps you:
✔ Improve readability
Too narrow or too wide content can make pages hard to read.
✔ Optimize mobile layouts
Responsive design is crucial for conversions.
✔ Control visual balance
Banners images and text look better when properly sized.
✔ Create higher-converting sections
Adjusting column width helps you highlight CTAs product images and key content.
✔ Match your brand style
Custom widths let you create unique layouts instead of relying on default blocks.
How to Adjust Column Width in Shopify PageFly
Below are the three main methods — from easiest to most advanced.
Method 1: Adjust Column Width Using the PageFly Editor (Recommended)
This is the most common and beginner-friendly method.
Steps:
Open the PageFly editor for your page.
Click on the Column you want to resize.
In the right sidebar go to General → Width.
Choose the type of width:
Auto (PageFly decides based on content)
Percentage (%) (best for responsive layouts)
Pixels (px) (fixed width)
Enter your desired value (e.g. 50% 300px 25%).
Pro Tip:
Use percentage values when building multi-column layouts to keep them balanced across devices.
Method 2: Drag the Divider Between Columns
PageFly allows drag-to-resize when columns share the same row.
Steps:
Hover your mouse over the border between two columns.
A blue vertical bar will appear.
Click and drag left or right to adjust the width.
Release when you reach your desired size.
This method is fast but results may not be perfectly precise — great for quick tweaks.
Method 3: Adjust Column Width Using Custom CSS (Advanced Users)
Use this method when you need:
Exact pixel control
Unique styling
Responsive custom width rules
Step 1: Assign a Custom Class
Select your column
Go to Styling → Attributes → Class
Add a class e.g.:
custom-column
Step 2: Add Custom CSS
Go to Page Settings → Custom CSS and add:
Example: Fixed width
.custom-column {
width: 320px !important;
max-width: 320px;
}
Example: Responsive width
@media (min-width: 1024px) {
.custom-column {
width: 40% !important;
}
}
Example: Mobile-specific width
@media (max-width: 767px) {
.custom-column {
width: 100% !important;
}
}
Examples of Common Column Width Adjustments
Example 1: Two-Column Product Section
Left column: product image → 60%
Right column: product text → 40%
Example 2: Hero Banner with Text
Left column: text and CTA → 50%
Right column: image → 50%
Example 3: Three-Column Icon Features
Each column → 33.33%
Example 4: Sidebar Layout
Sidebar column → 25%
Main content → 75%
Common Mistakes to Avoid
❌ Using only pixel widths
Pixel widths may break on mobile. Use % for responsive design.
❌ Forgetting to adjust widths per device
Use PageFly’s device preview (desktop/tablet/mobile).
❌ Applying CSS without a unique class
This can override the wrong elements accidentally.
❌ Dragging columns unevenly
Dragging can create awkward widths; use numbers for accuracy.
❌ Setting column widths that exceed 100%
This breaks layouts and causes overflow issues.
Frequently Asked Questions
Why doesn’t my column width change in PageFly?
Most likely the parent row has a fixed layout or padding interfering. Ensure the row width is set to 100%.
Can I adjust width differently for mobile?
Yes — PageFly has device-specific editors or you can use CSS media queries.
Why can’t I drag the column border?
Dragging only works when the columns are in the same row and the row uses a flexible structure.
Do I need CSS to adjust column width?
Not usually. CSS is only needed for advanced or pixel-perfect layouts.
Will adjusting column width affect SEO?
Not directly but better layout improves user experience which boosts SEO signals.
Conclusion
Adjusting column width in Shopify PageFly is simple once you understand the layout tools available. Whether you are using the built-in width controls the drag-to-resize feature or custom CSS you can create cleaner more professional pages that enhance user experience and increase conversions.
