Managing Responsive Design on SitePro Website Builder

This guide explains how to ensure your website looks clean and professional across all devices using The SitePro Website Builder on DirectAdmin.
1. Understanding Responsive Views
The builder automatically adapts your website for different screen sizes. You can preview and adjust your design using four device modes:

• Wide Desktop
• Desktop
• Tablet
• Phone (Mobile)

Key Difference:
On smaller screens, navigation menus are simplified—typically appearing as a hamburger menu instead of a full horizontal menu to improve usability.
2. Adjusting Layouts for Smaller Screens
Elements that look good on desktop may not display well on mobile devices.

• Switch to Vertical Layout:
  If elements are arranged side-by-side on desktop, change them to a vertical stack for smaller screens.
• How to Adjust:
  1. Select the element you want to modify.
  2. Open the Layout tab in the right-hand panel.
  3. Choose a layout option suited for the selected device view.

This helps prevent overlapping or cropped content.
3. Controlling Visibility by Device
Some elements may not be necessary on mobile and can be hidden to improve user experience.

• Access Visibility Settings:
  Scroll to the Visibility section in the right-hand panel.
• Hide on Specific Devices:
  Uncheck the device where you want the element hidden (e.g., Phone).

The element will still appear on other devices but will be removed from the selected view.

Responsive Design Checklist
Use this checklist before publishing your site: