You can watch this video about how to build mobile-responsive pages
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 so in this article.
About Device Switcher (All/Laptop/Tablet/Mobile)
Inside the PageFly editing dashboard, you can find the Device Switcher option on the top menu bar. You can easily see how your content will look on each device.
Here is how the function works in reality. It adjusts the editing canvas and what you see in the editor is what your visitors will see as well. So make sure that you create a comfortable user experience on mobile and tablet devices.
Let’s take a closer look at the Testimonials part of that template. On the desktop, we see a 2-row 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 the General tab > VISIBILITY.
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 your page on mobile/tablet and improve the overall user experience on your Shopify store.
You can check this video to know how to adjust the mobile layout with the Flex option