"We are revamping our Knowledge Base articles to serve you better. In case you find something unusual, do not panic. Reach out to our Support Team by submitting a ticket if you ever need some help.”
  1. Home
  2. DropFunnels Builder / Editor Basics
  3. Layouts
  4. How To Make Pages, Funnels, and Courses Mobile/Tablet Responsive

How To Make Pages, Funnels, and Courses Mobile/Tablet Responsive

How to make Pages, Funnels, and Courses Mobile/Tablet Responsive

Learn how to edit your pages, funnels, and courses for mobile and tablet devices. Create different size elements on your page depending on the screen size of your visitors. This will allow you to optimize your pages for all devices types.

There are three things you need to remember or consider before using the mobile responsiveness function;

1. There are tons of different browsers, these browsers all speak different languages. You simply need to provide the best option for all these devices to display your content in the best way possible.

2. It is important to know that this is an emulator. So everything you see within Dropfunnels editing mode is the best description of what you will be seeing visually. Even if you do not do any mobile responsive editing, it’s gonna do its best to make everything fit on any device. If you have a lot of videos, images on your page's content and you do not want to show all of them on small devices like mobile phones, you can hide some of them if not all.

3. It is very critical to test your page to an actual device to give you an actual experience of how your page would look on a mobile phone.

The general rule of thumb is; the simpler your pages are, the simpler it will be for it to be mobile responsive and looks good on any device.

Steps in doing mobile responsiveness editing

Step 1: Press the letter "R" 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 "Responsive Editing".

responsive editor

Step 2: Create a version for Small, Medium, and Large Devices.

If there is content that you would prefer not to show on small devices, you can hide those content. Small devices will show the compact version of your page, you have to consider what you would want to show as content. We suggest creating 2 or 3 versions of your content.

Creating a version for Small Devices means that the content will only show on Small/Mobile Devices and a version for Medium and Large Devices will only show on Medium and Larges Devices like Tablets and Desktop. To do this you need to create 2 or 3 copies of either Row, Column, or Module.

Note: In this example, we will be Subscribe form module and make it responsive.

Set Breakpoint

Step 3: 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). 

Responsive editing builder

Note: The top right of the responsive editing shows if you are on a Small view or Medium view and it also shows the size of the screen in pixels.

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

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> Large Devices Only. Then start designing the content.

large devices responsive editing

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> Medium Devices Only. Then start designing the content.

medium devices responsive editing

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> Small Devices Only. Then start designing the content.

small devices responsive editing

Note: You can quickly see if a breakpoint is set by hovering your cursor at the Row/Column/Module and you should see a "blue eye" Icon.

Step 5: 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".

Preview layout

Step 6: 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 for mobile responsiveness. Lastly, you need to check the newly edited page with an actual small device (mobile phone) to see how it would actually look.

Global Settings > Responsive Layout

Global settings responsive layout

Enable Responsive Layout

Turning off Responsive Layout means there will be no Breakpoint even if you set a breakpoint in any Row/Column/Module. This will simply ignore all the breakpoints that you have set and will only use the Large Devices Design. So make sure to always turn it on.

Enable Auto Spacing

When auto spacing is enabled, the builder will automatically adjust the margin and padding in your layout once the small device breakpoint is reached. We recommend turning this on but if you want to manually set margin and padding to all your layout you can turn this off.

Small and Medium Device Breakpoint

This is where can set the width of Small and Medium devices in pixels. When you enter responsive editing these values also show at the right side of the builder.

Use responsive settings in previews?

Preview Layout and Responsive Editing will use the values that you set on Small and Medium  Device Breakpoint. If you turn this off changes that you made may not reflect on Preview Layout and Responsive Editing but will only reflect on live preview.

Base Font Size

This value will be the default value in any of your Font until you change it.

Note: All changes to Global Settings will be reflected on all your Funnels or Page. If don't know what to do please contact us first by submitting a ticket. 

Was this article helpful?

Related Articles

DF Black Trimmed

ANNOUNCEMENT:
Our Knowledge Base articles are undergoing a comprehensive overhaul to enhance your experience.

If you encounter any unexpected issues or irregularities, feel free to connect with our Support Team by submitting a support ticket for prompt assistance.
Join our Slack Workspace

Join the DropFunnels Slack Workspace and get access to the DropFunnels team, other DropFunnels members, twice-weekly support calls and more!

Join our Slack Workspace

Become A DropFunnels Wizard


Complete our Fast Start Training and learn everything you need to know to launch your first or next funnel.

From Lead Capture to Products, Courses to Blogs, this easy-to-follow training covers it all.

We’ll even give you $50 credit for completing the training!


Become A DropFunnels Wizard