In this article, you will learn how to make your PageFly mobile page responsive.
PageFly layout structure is responsive by default. However, the app has the option to style your content on specific devices: mobile, tablet, laptop or desktop and you will also learn how to do so in this article.
You also can check this video tutorial to make a page mobile responsive:
About Device Switcher (All/Laptop/Tablet/Mobile)
Inside the PageFly editing dashboard, you can find the Device Switcher option on the top menu bar. You can easily see how your content will look on each device and customize it.
PageFly page editor is responsive by default.
For example, Let’s take a closer look at the Product List element on all devices below:
You can see we have a layout with 4 products in the row.
If you switch to Mobile view, the product list will show as a 2-row layout with 2 products in a row.
Another example, with the first testimonial, I want to add values to paddings of its container which here is the column to create inner spacing around the testimonial content.
When you switch to Mobile view, you can see it also has padding values as on all devices
Make Mobile page Responsive
Tip 1: Custom styling for each device
On All devices, create a section with a background image. Usually, when you set an image background for a section, it will first appear like this.
Switch to Styling tab > SPACING section > Insert values for top-padding and bottom-padding. In this case, set 200 pixels for both top-padding and bottom-padding.
You can set the Background Position and Background Size for the image when clicking on the More Settings button. In this case, set the Center position and Cover for Background Size.
Then check the section on Mobile view. You can see the background image is quite big and you don’t want it like that. In this case, you can edit the padding separately for mobile.
Tip 2: Hiding elements on specific devices.
With PageFly’s device custom design, you can go as far as hiding elements on specific devices to create a variety of designs on 1 single page.
Once the element is selected, go to the General tab > VISIBILITY section.
For example, we want the banner to appear only on mobile and to be hidden on other devices.
So we select the banner section > the General tab > enable Hide On for Desktop, Laptop and Tablet.
So now the banner only appears on the Mobile view.
Tip 3: Change the layout on Mobile view
In the All Devices option, this is the layout you edit:
And when you switch on the Mobile device, the layout is displayed like the image below:
The reason for the display is that when switching on the mobile device, the layout will show in order from the left to the right
In some cases, you want the image below the heading and the paragraph, here is the way to do:
- Go ahead to breadcrumbs, choose Row.
- In the Styling tab, scroll down to the DISPLAY parameter and choose the Flex option. In Direction, choose Column Reserve.
Then the image will be above the heading and the paragraph: