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
Once switched to the Mobile mode you’ll see these columns stacked vertically.
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.
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).
And the other 4 columns to 3 (4 x 3 = 12).
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.