In this article, you will learn how to make your PageFly page mobile responsive.
PageFly’s layout structure is responsive by default. Regardless, 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.
1. About Device Switcher (All/Laptop/Tablet/Mobile)
Inside the PageFly editor, 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.
You can check more details in the video tutorial below.
2. Make Mobile View Responsive
Change or edit Layout on Mobile
2.1. Change Layout
In this example here, you can see we have a layout with 4 products per row.
You can use the device switcher on the top bar to switch to Mobile view, the product list will turn into a 2×2 layout.
As you click on a row, go to General > Content, you can change the number of Columns per line (maximum is 4), or click on the Product List to show the number of Items per row ( maximum is 4 on mobile view).
2.2. Resize Columns
If you want different sizes for the columns, you can use the column resizer by clicking the column > General > Scroll down to Height.
You can adjust the Height separately for each device. For example, we will set the Height to 550px on All devices and 300px on Mobile.
2.3. Switch layout
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 to the mobile device, the layout will show in order from left to right.
In some cases, you want the image below the heading and the paragraph, here is the way to do it:
- Go ahead to the breadcrumbs, choose Row.
- On the right sidebar, go to Styling > Display > Choose Flex. In Direction, choose Column Reverse.
Then the image will be above the text:
If you choose Column Reverse but the image does not show full on mobile or the image and text are overlapped, you can use Wrap Reverse instead or set width and height for the image.
- Flex direction is essentially used to adjust the orientation of the display of items. When you choose Column/Row or Column/Row Reverse, items will stack in columns/rows or in the opposite direction.
- And flex-wrap is used to control the wrapping of items that fit inside the container. If you reduce the width of the browser, you may not see several items on the same line. wrap-reverse is now set to be wrapped neatly in the container and displayed in reverse.
- Let’s check this article to find more tips on using the Flex option.
2.4. Full screen image/video/sections
On mobile or other devices that have smaller screens, you can remove column spacing to make the images/ videos/ sections full-width to look nicer.
Just click on Row then set column spacing to zero and remember to disable the Set Fixed Width for the section so that this section will show full width in mobile.
3. Custom Styling for Each Device
3.1. Edit Styling tab’s parameters for each element
In Styling, we have the option to edit responsiveness for each element that has the device icon on the right without affecting other devices. With elements that don’t have this icon, if you adjust them in one device, it will apply for other devices as well.
You can choose the device mode and edit a separate element for it, which will only be shown to users who use that device.
For example, we will choose mobile here. After some styling, we can check it on live view: Open live view, right click and click on Inspect > choose the phone icon.
3.2. Edit Spacing
Another common issue with Styling responsiveness is Spacing. There are a large number of users who face the overflow issue – that is when your pages have a kind of horizontal bar at the bottom like this and it makes the pages shake when you scroll back and forth.
This issue is caused by margins of containers that exceed the device’s screen size (Extra space left and right). It mostly happens with full-width sections.
In this case, you can remove the column spacing or add the code “overflow: hidden…….” in the Custom CSS code modal.
3.3. Typography
Let’s say, on All devices, you create a big heading – too big (and thus, ugly) for smaller screens. In this case, we can edit the heading element on mobile, just by reducing the font size of the heading. Go to Styling > Typography and adjust the font size. Remember, changes on mobile will not affect other devices’ views.
Another common case is that you have a hero banner with a background image and text content. To move the content to the right, add padding to the container. But that will make the content disappear on mobile view.
All you need to do now is remove the padding or set it to zero, then the content will be visible.
It’s better to avoid using padding/ margin align left/ right to align center for an element → Use Text Alignment/ Content Position instead so it will be less work when editing on other devices. When you must use margin/ padding to align elements, remember to adjust on each device to avoid layout breaking.
4. Custom Image on Mobile
Check this video below if you want to create different images for mobile. Plus, we’ve included some pro tips to optimize your Shopify store’s performance:
4.1. Image element
Sometimes when you switch from All devices to Mobile view, the images are cut off and look ugly.
In that case, there are a few solutions such as: decrease the padding, or use a new image.
4.2. Background images
With the background images not showing fully on mobile view, there will be a CSS code to handle this issue. We will calculate the ratio of the images and then set the height for the container of the image. Here is the formula:
Height/ width x 100% (height divided by width then multiple with 100 percent) = CSS height
For example, if the result is 50, the CSS height will be “height: 50vw”
Then the image height will always be full respectively on every device screen.
5. Hide Elements on Specific Device
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. You can hide said element exclusively on, but not limited to, Desktop, Laptop, Tablet, and Mobile.
For example, we would like to build a separate design on mobile. So, first on All devices mode, we’ll add a Heading into the editor.
To keep the heading only on Mobile devices, first choose Mobile on the device switcher. Click on the heading, then on the right sidebar, go to General > Visibility > turn on Hide on Desktop + Laptop + Tablet. The heading will only appear on mobile view. This way you can completely build a different design on mobile view.
Disclaimer: This hiding feature can slow your speed down, so it’s best not to abuse it.
If you have any further question or need more help in building your store, please contact our 24/7 Live chat service by clicking on the chat icon in the left bottom corner.
