Tutorial: Editing Your Website's Mobile and Desktop Versions on Showit

One of the best features of Showit is the ability to design your mobile and desktop versions separately — without writing a single line of code. This allows you to fine-tune how your site looks and functions across all devices.

In this guide, you’ll learn how to switch between mobile and desktop views in Showit, how to edit them independently, and tips for keeping both versions cohesive.

Step 1: Open Your Site and Locate the Mobile/Desktop Views

1. Log into app.showit.co and select the website you want to edit.
2. In the center of the screen, you'll see two columns:
   • Left column = Desktop view
   • Right column = Mobile view

These are independent design areas. Moving or resizing an element in one does not affect the other unless you intentionally link them.

Step 2: Editing Elements for Desktop vs. Mobile

1. Click on any text box, image, button, or shape in the desktop view to edit it.
2. Repeat the process in the mobile view to reposition or resize the same element.
3. You can hide elements on one view using the eye icon in the right sidebar under the "Layout" tab (check/uncheck “Show on Desktop” or “Show on Mobile”).

💡 Tip: Keep your mobile version clean and easy to scroll. Stack elements vertically for a better user experience.

Step 3: Adjusting Fonts, Sizes, and Spacing

• Use the Text Settings in the right panel to adjust font size, spacing, and alignment per device.
• Headings might need to be smaller and paragraphs more spaced out on mobile.
• You can also use different background colors or images per view to enhance readability and contrast.

Step 4: Preview Your Site

1. Click the Preview icon in the top-right corner.
2. Use the mobile/desktop toggle in preview mode to test responsiveness.
3. Tweak as needed for a consistent experience across both views.

Step 5: Best Practices for Mobile Responsiveness

• Avoid overlapping elements in mobile view.
• Test all pages, not just your homepage.
• Use consistent padding and alignment for a clean look.
• Always check navigation menus — they often need resizing or restyling on mobile.