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 learn how to do that in this article.
About Device Switcher (All/Laptop/Tablet/Mobile)
Inside the PageFly editing dashboard you can find Device Switcher option at the menu bar. You can easily see how your content would look like on each devices.
Here is how the function works in reality. It adjusts the editing canvas and what you see in the editor is what your visitors would see as well. So make sure that you create a comfortable user experience on mobile and tablet devices.
Important: Just keep in mind that the changes you made in General tab are applied to all devices regardless of the device mode you are currently in. The changes in Styling tab are applied to the selected device only.
With the Hide On feature in Advanced tab of Element Inspector. Let’s see how it works.
Fine-tune content presentation on individual mobile devices
PageFly allows you to fine-tune content presentation of your page on individual mobile devices. Let’s take Whey product page template as the example. You can find this template in the template library here:
Let’s take a closer look at the Testimonials part of that template. On the desktop, we see 2 rows layout with 3 testimonials in each row.
If you switch to Mobile, this part will be a bit too long since each testimonial covers almost the full mobile screen.
In this example, we want to show only 3 testimonials on Mobile instead of 6. To do that we select the container of each testimonial which is the column and navigates to Advanced tab.
Next, we enable Hide On setting for Tablet and Mobile. It’s DONE! To check if the testimonial is hidden on Mobile and Tablet, we use the Device Switcher.
This is an example of how you can have optimized content for the page on mobile/tablet and improve the overall user experience for your Shopify store.