How to Use Responsive Design for Your Website

Responsive design ensures that your website looks good and functions well on desktop, tablet, and mobile devices. The website builder includes various tools to help you adjust elements and layouts for different screen sizes.

1. Accessing Responsive Views

1. By default, you start designing in Desktop View.
2. To check how your site appears on other devices, open the sidebar on the left and select:

• Tablet View
• Mobile View

1. Each view allows you to adjust settings independently, so changes made in tablet or mobile view do not affect other views.

2. Adjusting Text and Button Sizes for Different Screens

• In Tablet or Mobile View, select a text element.
• A reduced toolbar will appear, allowing you to modify font size, spacing, and other responsive settings.
• Adjust text sizes to ensure readability on smaller screens.
• Buttons can also be resized to fit properly within mobile layouts.

3. Adjusting Column Layouts

Columns are automatically set to 50% width on desktop, but they may need adjustments for smaller screens:

• In Tablet View, resize columns by dragging the handlebar between them.
• In Mobile View, columns are usually stacked vertically to improve readability.
• If you prefer columns to remain side by side on mobile, adjust their widths using the handlebar.

4. Reversing Column Order on Mobile

Sometimes, the order of columns needs to change for better mobile presentation:

1. Select the column settings.
2. Look for the Reverse Columns option.
3. Enable it to switch the column positions.

This ensures the most important content appears at the top on mobile devices.

5. Hiding Elements for Specific Devices

If an element (e.g., an image) is unnecessary on mobile:

1. Select the element or column.
2. Click on the eye icon in the toolbar to hide it from that view.
3. The element remains visible on desktop and tablet but is hidden on mobile.

To restore a hidden element:

• Click the "Show Hidden Elements" button in the bottom-right toolbar.
• The hidden element will appear blurred, indicating that it is inactive.
• Select the element and uncheck the hidden option to bring it back.

6. Advanced Visibility Controls

For more control over when an element is visible:

1. Select the element and open Settings > Styling > Advanced.
2. Choose whether the element should be shown or hidden on:

• Desktop
• Tablet
• Mobile



Blurred elements indicate they are hidden for that specific view.

With these responsive design tools, you can ensure your website maintains a professional and user-friendly layout across all devices.