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.
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.
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.