Side by Side is an editor view in Rocketspark that puts your desktop and mobile design right next to each other while you build. Both views are live, most changes update as you work, and you can keep an eye on both at once without flipping between tabs.
Side by Side is a way to work in the Rocketspark editor that lets you see your desktop and mobile design at the same time, in one window.
Your computer view sits on the left, your mobile view sits on the right. As you edit on desktop, your mobile preview updates live alongside it, so you'll always know how your work is landing on a phone.
Getting started
When you open your editor, you can switch to Side by Side using the view icons at the top of the editor, near the Dashboard, Editor, and Preview tabs. You'll see three icons there: desktop, mobile, and Side by Side (split screen). Click the Side by Side icon to flick it on.
Side by Side works best on a screen that's wide enough to show both views comfortably (most laptops and external monitors will do the job nicely). On smaller screens, it can feel a bit tight, but you can switch it on and off whenever it suits you. If you are working on a very small screen, the Side by Side feature will not be an option to choose.
Once Side by Side is open, you'll see:
- Desktop view (left): your full computer view, exactly as visitors would see it on a laptop or desktop screen.
- Mobile view (right): a phone-frame preview showing your mobile design, live and editable.
- Width drag handle: the vertical line on the right edge of the desktop view, which lets you resize the desktop view to test different screen widths. More on this below.
- Mobile scrolling in sync toggle: down in the bottom-right of the editor, used to switch synced scrolling on or off.
Editing on the desktop view
Editing on the desktop view works exactly as you're used to.
Click on any block to select it, drag blocks to rearrange them, and use the sidebar to change settings. Most changes you make update straight away on the mobile view too (layout changes, adding content, deleting content, etc.), so you can see how your design looks on a phone in real time. Other changes, like a change to a text block, will only live update on the mobile view once you click "save changes" to the edits you are making on the desktop.
Editing on the mobile view
When you hover over a section (also called a stack) in the mobile view, you'll see a blue dashed outline appear around it, and a small toolbar pops up at the top of that section.
The toolbar has two icons, both of which are quick shortcuts that open the usual settings sidebar on the left. They're there to save you a trip through the menus for the two mobile settings designers reach for most often
.
The text icon on mobile
- Click the text icon on the mobile toolbar
- The sidebar opens straight at Headings & Paragraphs, with the Mobile tab already selected.
- From there you can adjust the size of headings and body text for the mobile view only, and any other text styling that lives in those settings (Your desktop text styling stays exactly as it is).
The toolbar lets you adjust the size and styling of text for mobile, but you'll still edit the actual wording of text on the desktop view. Anything you type or paste on desktop updates on mobile automatically.
The width and spacing icon on mobile
- Click the width and spacing icon
- The sidebar opens at Width & Spacing, with the Mobile tab already selected. From there you can:
- Set column wrapping (one or two columns on mobile)
- Reverse column order so content stacks the way you want
- Fine-tune column spacing (left and right, top and bottom, gap between columns)
- Set vertical content alignment
Synced scrolling
When you scroll the desktop view, the mobile view scrolls along with you, and the other way around. Both views always show the same part of your page, so you can focus on one section at a time without having to scroll each view separately.
If you'd prefer to scroll the two views independently, you can switch synced scrolling off using the Mobile scrolling in sync toggle in the bottom-right of the editor.
Testing your design at different screen widths
Most of your visitors aren't viewing your website on a giant monitor. They're on laptops, smaller external screens, or browser windows that have been resized. To make sure your design holds up across all of them, you can resize the desktop view inside Side by Side.
Look for the vertical line on the right edge of the desktop view. Click and drag it to the left, and the desktop view will shrink. Drag it back to the right, and it grows again.
Scrubbing through different widths this way is the easiest way to spot any spacing, layout, or image issues before your visitors do. It's also why Side by Side is set to a real-world width by default, so you're designing where your visitors actually are, not just for the screen you happen to be sitting at.
Change Design in Side by Side
Change Design is where you set your sitewide style: fonts, colours, layout, logo size, and so on. It works a little differently to the rest of Side by Side at the moment.
While you're in Change Design:
- Desktop changes update live in the desktop view, just like the rest of the editor.
- Mobile changes don't update live in the mobile view yet. You'll need to save your Change Design updates first, then refresh the page, before you'll see them reflected on the mobile side.
For example, if you're adjusting your logo size for mobile, the desktop view will show the logo resizing as you drag the slider, but the mobile preview won't update until you save and refresh.
It's something we're looking to improve in a future update, so the mobile preview can update live in Change Design too.
Common questions
Will edits on the mobile view change my desktop design?
Some settings only affect the mobile view (mobile text size, mobile column layout, mobile width and spacing). Other changes, like editing text content, swapping an image, or rearranging blocks, will affect both views because they're sitewide content changes.
Can I turn Side by Side off?
Yes. If you'd prefer to work in a single view, you can switch back to desktop-only or mobile-only using the view icons at the top of the editor.
Why can I not access Side by Side?
If the icon is greyed out, this means your screen size is too small for this feature (there is not enough space for the desktop and mobile view to be side by side). You can use the standard desktop and mobile view icons to preview the website on the different screens instead.
Does the desktop width drag handle change my actual website?
No. The drag handle only changes how the desktop view is displayed inside your editor, so you can test how your design looks at different widths. It doesn't change anything about how your live website appears to visitors.
Why aren't my Change Design tweaks updating live on mobile?
Change Design mobile previews don't update live inside Side by Side yet. Save your changes and refresh the page to see them on the mobile side. The desktop view will still update live as you go. We're looking at making mobile fully live in Change Design in a future update.
How do I hide a stack's background image on mobile?
Open the stack's design settings on the desktop side, head to the background section, and you'll find the option to hide the background image on mobile there.
I'm a designer building for a client. Will my clients see Side by Side too?
Yes. Anyone you've given editor access to (including your clients after handover) will see Side by Side in their editor too - if their screen size is large enough. It's a nice way for clients to feel more confident about how their website looks on a phone as they make changes.
Need a hand?
If you've got any other questions or anything isn't behaving the way you'd expect, the support team are always happy to help. Drop us a line at support@rocketspark.com and we'll come straight back to you.