Specify the number of columns for each device

In this article, you’ll learn how to customize your PageFly page for mobile devices with any desired amount of columns per row.

Standard page with responsive design

Let’s take a look at the example where we have a page layout with 1 row and 6 columns.

specify the number of columns

Once switched to Mobile mode you’ll see these columns stacked vertically.

So how can we make the mobile page layout have 2 rows, with the 1st row containing 2 columns and the 2nd row containing 4 columns?

Mobile layout with 2 columns on 1st row and 4 columns on the 2nd row

Step 1: Click on the button of the Colum

The result will be like the image below.

Note that if you use this step, you only need 2 columns to do so.

Step 2: Adjust the spacing manually

You can adjust the spacing of the columns manually to set 2 columns on 1st row and 4 columns on the 2nd row

That’s it. As you can see PageFly can help you build any desired page layout on different devices. Thus, better customer experience leading to an increase in conversion rate.

Was this helpful?

Try out all PageFly features with Free plan

Don’t have Shopify store yet? Create store

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!