How To Customize Page To Make It Mobile Friendly

Customizing your page to be mobile-friendly is essential for ensuring a seamless user experience across all devices. As more users browse websites on mobile devices, it's important that your content looks good and functions well, regardless of screen size. By optimizing your page for mobile, you can improve engagement, reduce bounce rates, and make sure your site is accessible to a wider audience.

Step 1: Access Responsive Editing

Click the Dropdown menu at the top left corner to show the tools menu and select Responsive Editing. Alternatively, you can press the 'R' key on your keyboard to activate responsive editing. This has to be done while you are in edit mode or while editing the page.

Step 2: Select the device type that you would like to do the responsiveness editing, you can select between Small devices (mobile devices) and Medium devices (tablets). This action will switch your view to simulate how your website appears on different devices.

Step 3: Edit the Row/Column/Module and design it based on the look and feel that you'd like.

Your website's content may need adjustments to ensure it fits seamlessly on all devices. Use the provided tools and options to modify the layout, font sizes, and other elements as needed.

Note: Make sure to only make changes on the Row/Column/Module if you are on the right editing view and Breakpoint. For example, if you set a breakpoint on subscribe form module to only show for small devices make sure that you are editing that module on the Responsive editing view for Small Devices.

Designing Large Device breakpoint

Check the breakpoint of Row/Column/Module and make sure that it is set to Large Device only, if not you need to set it to Large Device by going to Settings> Advanced> Visibility> Breakpoint> select the Large Device icon. Then start designing the content.

Designing Medium Device breakpoint

Check the breakpoint of Row/Column/Module and make sure that it is set to Medium Device only, if not you need to set it to Medium Device by going to Settings> Advanced> Visibility> Breakpoint> select the Medium Device icon. Then start designing the content.

Designing Small Device breakpoint

Check the breakpoint of Row/Column/Module and make sure that it is set to Small Device only, if not you need to set it to Small Device by going to Settings> Advanced> Visibility> Breakpoint> select the Small Device icon. Then start designing the content.

Step 4: Preview Layout

If you are satisfied with your work and you want to see the changes that you made in Large, Medium, and Small devices you can check it on Preview Layout, press the letter "P" on your keyboard, this has to be done while you are in edit mode or while editing the page or funnel alternatively you can also click the Dropdown menu at the top left corner to show the tools menu and select "Preview Layout".

Step 5: Click Done and Publish

If you are happy with the result after editing using mobile responsiveness, you may simply publish your work to save the settings you did. Lastly, you need to check the newly edited page with an actual small device (mobile phone) to see how it would actually look.