If your page is not automatically responsive, or if elements look incorrect on mobile, SystemeScaleβs mobile editor allows you to edit the mobile view without affecting the desktop version.
Step 1: Switch to mobile view
To edit the mobile version of your page, switch from desktop view to mobile view inside the page editor.
1
Open your page in the editor
Go to the page you want to adjust and open it inside the SystemeScale page editor.
2
Click the mobile icon
Click the mobile icon at the bottom of the editor to switch to mobile view.
βΉοΈ
Desktop and mobile can be edited separately
The mobile editor lets you correct mobile layout issues without changing the desktop version of the page.
Step 2: Edit mobile-specific settings
Some settings in the editor are specific to the mobile version of the page.
1
Look for the mobile icon
Any settings marked with a mobile icon are specific to the mobile view.
2
Adjust mobile settings
Change the mobile-specific settings as needed. These changes will not affect the desktop version.
β
Fix mobile problems directly
Use mobile-specific settings to correct spacing, alignment, layout, and visibility issues that only appear on smaller screens.
Step 3: Show or hide elements on specific devices
You can choose to show or hide elements depending on the device being used.
1
Select the element
Click the element you want to show or hide on desktop or mobile.
2
Find Item visible on
Use the checkboxes under Item visible on to select Desktop, Mobile, or both.
π§©
Device visibility helps simplify mobile layouts
If an element looks good on desktop but makes the mobile page too crowded, you can hide it on mobile and keep it visible on desktop.
Step 4: Control how row columns display on mobile
You can choose whether row columns display vertically or horizontally on mobile devices.
Display columns vertically
To display columns vertically, also known as stacked columns, uncheck the Disable vertically stacking rows on mobile devices box.
1
Select the row
Click the row whose columns you want to adjust for mobile.
2
Uncheck the stacking option
Uncheck Disable vertically stacking rows on mobile devices to make the columns stack vertically on mobile.
Display columns horizontally
To display columns horizontally, also known as side-by-side columns, check the Disable vertically stacking rows on mobile devices box.
3
Keep columns side-by-side
Check Disable vertically stacking rows on mobile devices to keep the row columns horizontal on mobile.
β οΈ
Use horizontal mobile columns carefully
Side-by-side columns can become too narrow on small screens. Use this only when the content still remains readable and clean on mobile.
Step 5: Reverse row columns on mobile
You can also reverse row columns on mobile devices when the mobile reading order needs to be different from the desktop layout.
1
Select the row
Click the row that contains the columns you want to reverse.
2
Enable reverse columns
Check the corresponding box to reverse row columns on mobile devices.
π‘
When reversing columns helps
This is useful when your desktop layout places text and images side by side, but the mobile version needs a better order for readability.
Recommended mobile editing workflow
When fixing a mobile page, first switch to mobile view, then review each section from top to bottom. Adjust mobile-specific settings, hide unnecessary elements, and check whether your row columns should stack, stay horizontal, or reverse order.
βοΈ
Need help opening the page editor?
Use the page editor guide if you need to access the editor before adjusting the mobile version of your page.
