PageFly - Specify the number of columns for each device

41 views PageFly 1

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.

Default responsive behavior of PageFly page 1

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

Default responsive behavior of PageFly page 2

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

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

Step 1: Configure the Row settings

  • Set Device Switcher to All
  • Select the row element > General tab
  • Disable Equal Width, Stackable and set the Columns parameter to “auto”.

The result will be like the image below where all columns are stacked vertically.

Disable responsive features to be able to use different number of columns on different devices

Step 2: Configure the Mobile layout

  • Set Device Switcher to Mobile
  • Select the column element > General tab
  • Adjust the Column Width value for each column like below.

Since PageFly page is designed with 12 columns grid system layout base. In order to achieve the mobile layout with 2 rows, 1st row with 2 columns and the 2nd row with 4 columns. You need to assign the Column Width value for the first 2 columns to 6 (6 x 2 = 12).

2 columns on 1st row, 4 columns on 2nd row (Mobile)

And the other 4 columns to 3 (4 x 3 = 12).

4 columns on 2st row (3 width/each)

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