Make my page mobile responsive

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

Tip 1: Use only one image for all devices

From PageFly 2.8.0 version, you can only use one image on different devices. To change the image, you need to go to the “All Devices” view and reselect the image you want in the CONTENT parameter.

pagefly image element 2

If you are using the old image elements in your pages created with the previous PageFly versions, you can still change the images for different devices as you wish.
You just need to switch to each device view and reselect the image in the CONTENT parameter of the General tab.

Tip 2: Use ‘Hide’ to show the image on different devices

When you need to show different images for different devices, please follow the steps below:

  • In the All devices view, add the images that you want to show on different devices.
  • Select each image, and in the General tab, you will see the VISIBILITY parameter.
  • To show it on a specific device, simply hide it on other devices.
  • Click the Save and the Publish buttons, and you will see different images on each device.

You can look at this image as an illustration:

This is how it looks on the Laptop device:

This is how it looks on the Mobile device


The video below will describe the detail about this “Hide” function

Tip 3: 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.

pagefly mobile responsive

Switch to Styling tab > SPACING section > Insert values for top-padding and bottom-padding in the “%” unit. In this case, set 30% for both top-padding and bottom-padding.

mobile responsive 1

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.

make a page mobile responsive

Then, you can check the responsive design by selecting Device switcher > Tablet, or Mobile.

Positioning elements horizontally

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

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

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

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 top 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 the All view.

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 tab.

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

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

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 lion section to appear only on mobile as the banner and to be hidden on other devices.

So we select the lion section > the General tab > enable Hide On for Desktop, Laptop and Tablet.

Vice versa, we select the eagle section > go to the General tab > enable Hide On for Mobile.

The eagle section will appear on all devices and is hidden on Mobile.

If you think you need a video to instruct detail and clearly, you can see the video below on how to build the mobile responsive pages

And a video to guide how to adjust the layout with the Flex option

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
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!
Languages