How to make impressive mobile responsive page?
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
In this guide, we'll show you how to make sure your PageFly pages look great on any device. Having a mobile-responsive design is key to making your online store look professional and boosting your conversion rate. This is especially true for mobile views, as more and more shoppers browse on their phones.
While PageFly pages adjust automatically to fit different screens, you go through how to fine-tune your pages for phones, tablets, laptops, and desktops for the best look on each device.
In this article
Requirement
How to make mobile view responsive
Tips and best practice
Frequently asked question
Related source
To make sure your page looks great on mobile:
Use the Device Switcher: Open your PageFly editor and look for the Device Switcher at the top. It lets you preview and adjust how your page appears on different devices, like phones or tablets.
For more information about this feature, watch our video tutorial:
Adjust with Device Sensitivity: Inside PageFly, there’s a feature to fine-tune how elements look on specific devices. Here’s how:
Pick an item on your page to change.
Look for a ‘computer monitor screen’ icon next to the item's settings.
Use this to make precise adjustments for that element on different screens.
Let's break this down into simpler, more digestible steps for making your PageFly page mobile-friendly.
In mobile view, it's possible to adjust how elements like images, videos, and text are ordered within a column, row, or section. You can also modify how many items are displayed per row to ensure your page looks great on smaller screens.
Change Order Of Items
For sections with a layout consisting of one column for an image or video and another for text, you can customize their arrangement specifically for mobile viewers. Here’s a simple guide:
Select the row that includes your columns
Navigate to the Styling tab, choose Display style, select Flex
Set Flex direction to Column reverse.
This action will invert the order of the columns, allowing you to customize their arrangement for mobile viewing.
For example: Say you have a section where the text appears above an image on mobile. To flip them, applying Flex > Column Reverse will move the image above the text.
If you choose Column Reverse but the image does not show fully 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.
Change Number Of Items Per Row
In mobile devices, list-based elements like product list, collection list, or content lists are typically set to display 2 items per row to make the best use of the small screen sizes. However, you have the flexibility to adjust this setting:
Select the List: Click on the list element you want to adjust.
Access Settings: Navigate to the General tab, then find "Items per row."
Adjust the Number: Change this setting to the desired number of items per row. You can choose from 1 to 4, depending on your preference and the layout's needs. For a mobile-friendly view, it's recommended to stick with 1 or 2 items per row to ensure readability and ease of navigation for your customers.
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.
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.
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.
Edit Text Font Size
Let’s say, on All devices, you create a big heading - too big 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.
Check this video below if you want to create different images for mobile.
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.
Background Images
With the background image, you can change to a more fit image (with portrait size) with mobile view. To do this, click on the section/row/column that you want to change background image > go to Styling tab > scroll down to Background image > click “Clear” > click “Select” to choose another image.
If you want the background images to show fully on mobile view without changing image, 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.
With PageFly’s device custom design, you can go as far as hiding elements on specific devices to create various 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.
Important note: This hiding feature can slow your speed down, so it’s best not to abuse it.
Change Order Of Items
Select the Flex block that includes your elements. In our example below, the first child flex block contains an image; the second child flex block contains heading, paragraph and button.
Navigate to the Styling tab > under the Layout section > Switch the value to No under the Reverse order parameter.
Change Number Of Items Per Row
Select the List: Click on the list element you want to adjust.
Access Settings: Navigate to the General tab, then find "Items per row."
Adjust the Number: Change this setting to the desired number of items per row.
To stretch the Image/Video/Sections across the full screen, set its section to full width. This can be done by clicking the flex section, going to the Styling tab, and picking the Fill container for the Content width option.
Avoid negative margins.
Adjust text size for readability on smaller screens.
Stick to 1 or 2 items per row for lists.
Use margins to create space between elements/sections.
Keep your page structure simple.
1. Can I edit elements separately on different devices?
Yes you can to optimize the mobile responsiveness. You can adjust the height separately for each device, for example, you can set the height as 550px on all devices, but 300px for mobile.
2. How can I edit the background image on mobile view?
As the background images are not showing fully on mobile view, you can edit CSS code to handle this issue, by formula: Height/ width x 100% = CSS height (For example: if the result is 50, the CSS height will be “height: 50”).
3. Need more help?
Contact our 24/7 live chat support for any questions or assistance.
Let's check this article to find more tips on using the .
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
