PageFly - Make my page mobile responsive

545 views PageFly 3

In this article, you will learn how PageFly page is designed to be responsive by default. However, sometimes you need to remember these tips to ensure a smooth experience for your visitors.

Tip 1: No fixed dimensions, EVER

By default, all layouts are responsive, so never set fixed dimensions (including width and height) for any element.

The grey values you see in Styling tab > Box Styles section > Dimensions are default values. They are responsive on different device modes, so leave them that way.

Dimension in Styling tab of Image element

Important: If you want to set horizontal and vertical dimension for an element, use percentage margin and padding.

Tip 2: Percentage margin and padding, please

Setting dimensions with padding

Usually, when you set an image background for a section, it will first appear like this.

Background image when you first set it

Switch to Styling tab > Box Styles section > Insert values for top-padding and bottom-padding in “%” unit.

Use padding to expand the background image

You can check the responsive design by select Device switcher > Tablet, or Mobile.

Positioning elements horizontally

To position an element horizontally, use “%” unit so it can go responsive nicely on different screen sizes.

In the example, we want to move the paragraph more to the center, so we add values to the right-padding and left-padding of the section that contains the paragraph.

Choose the Section > Styling tab > Box Styles section > add “10%” to the right-padding and left-padding.

Use padding to expand the background image

This method comes in handy when you want to set unequal spacing on 2 sides of the element.

To check the design on mobile, navigate to the menu bar > go to Device switcher > choose Mobile.

Select the section > Styling tab > Box Styles. You can see that it has “10%” value for left-padding and right-padding. These values are added when we set it on All view.

Use padding to expand the background image

If you don’t like these paddings on mobile, set the Padding values back to “0px”.

Tip 3: Custom styling for each device

You can customize the design of an element for a specific device (laptop, tablet or mobile) by configuring the Styling or Advanced tab.

In this example, on All view, the section has top and bottom padding of “20%”.

Styling tab in All view mode

We can go to Device switcher > switch to Tablet (or Mobile) > Styling tab to edit the padding separately for tablet or mobile.

Hiding element on specific devices.

With PageFly’s device custom design, you can go as far from hiding elements on specific devices to create a variety of designs on 1 single page.

Once the element is selected, go to Advanced tab > HIDE ON section.

For example, we want the lion section to appear only on mobile as the banner and go hidden on other devices.

HIDE ON feature located in Advanced tab

So we select the lion section > Advanced tab > enable HIDE ON for Desktop, Laptop and Tablet.

Vice versa, we select the eagle section > go to Advanced tab > enable HIDE ON for Mobile. The eagle section will appear on all devices and being hidden on Mobile.

HIDE ON feature located in Advanced tab

Was this helpful?