In today's world, it's critical to ensure that every page of your website or funnel built with the Tekmatix platform is fully responsive on mobile devices. Here's a clear guide on how to check and optimize your web pages for mobile responsiveness.

Checking Desktop and Mobile Views

At the top of your Tekmatix editor, you can easily toggle between desktop and mobile views:

• Desktop View: Check how your website appears on desktop devices.

• Mobile View: Check how your website appears on mobile devices.

Understanding Visibility Settings

It's important to note that elements or sections created in the desktop view might not automatically show on mobile and vice versa. Here’s how you ensure correct visibility:

• Click on the green section of your webpage.

• Navigate to the editing sidebar and click Advanced.

• Check or uncheck the visibility options for desktop and mobile as needed.

Example: Adjusting Section Visibility

For instance, a cloned desktop page might incorrectly display a "Done for You Services" section on mobile that you don't want:

• Click the green section on mobile view.

• Under Advanced, toggle off mobile visibility.

Optimizing Spacing for Mobile

Spacing is crucial, especially for the top section of your page, which is prime real estate. Follow these steps:

• Select the desired section in the mobile view.

• Adjust margin and padding in the sidebar under General Settings.

• Ensure you edit spacing specifically for mobile to avoid altering your desktop layout.

Example adjustment:

• Reduce padding from 60px down to 10px or smaller to better use the screen space on mobile.

Optimizing Font Size for Mobile

Large font sizes can negatively affect readability on mobile:

• Click on the text element in mobile view.

• Edit the Font Size to be smaller on mobile without affecting desktop settings.

Padding Adjustments

Sometimes you’ll want to add padding to improve readability:

• Select the text or element.

• Adjust padding specifically on mobile to prevent visual clutter.

Example adjustment:

• Add right-hand padding (e.g., 30px) to move text away from distracting background images.

Step-by-Step Mobile Optimization Checklist

1. Desktop Check:

   • Click each green section.

   • Under Advanced, ensure the section is turned on for mobile.

2. Mobile Check:

   • Scroll through your mobile view.

   • Turn off sections not intended for mobile.

   • Adjust excessive spacing.

Final Checks

• Verify your edits haven’t negatively impacted desktop views.

• Ensure uniformity across all sections in both views.

Take Action Now

Don't wait—check all your website and funnel pages today. Ensuring they're mobile-responsive is vital for your online presence.

Happy Tekkin!