Your Semplice site is responsive by default, but the responsive editor allows you fine-tune your content for different screen sizes, ensuring it looks great on each device and browser width.

With the Responsive editor, you can:

• Adjust the padding or margin values of columns and sections
• Change font sizes and colors
• Reduce headlines that are too large for certain device widths
• Hide or replace content for a specific device width

Keep in mind: Any changes you make will only affect your selected screen size. Once you edit a screen size, it becomes "unlocked" from the desktop version and will not reflect changes you make to desktop.

Finding the Responsive Editor

Within your page or project, click the phone icon at the top right corner of the content editor.

Adjusting content for different breakpoints

After selecting your screen size, make any changes as you normally would in the content editor.

Any changes you make within the responsive editor will ONLY affect the selected device you are editing. For example, changing the font size of your headline within the mobile view will ONLY affect how your site looks on mobile – not on tablet or desktop.

Pro Tips

Copying your changes from one device to another

To copy your changes from one breakpoint to another, click on "Copy Changes From' and select the device width you wish to copy styles from.

Resetting all changes

To reset a breakpoint back to your original design, click the "Reset Mobile Changes" button.

Hiding sections on specific breakpoints

Use the "Visibility" setting to hide a section from the currently selected breakpoint.

Using multiple columns

To enable multiple columns instead of one, you can use the "Column Mode" with the setting "Multi". 

Changing element stacking order 

If you want elements to appear in a different order than on desktop views, you can assign column stacking order under your Column settings in the editor popup.


 

Note: The "Spacer Column" will not occupy vertical space on mobile breakpoints.

Troubleshooting

Why doesn't the responsive view match the live site?

The responsive feature is a great guide for testing, but everyone's screen sizes and browsers are different. With the responsive editor, we aim to reflect the best average view for all.

With enough planning and refining, you can ensure your content gracefully transitions and looks great at most screen sizes. Usually this is simply a matter of reducing text sizing or padding around elements.