Mobile VS. Desktop Design

Tips, tricks and best practices for designing your mobile and desktop site side by side.

Jeff Willems avatar
Written by Jeff Willems
Updated over a week ago

Note: We have made updates to how mobile & desktop Canvas Backgrounds split & sync. Please see this video for details!

Side by Side Editing

One of the great things about Showit is the creative freedom you have in manipulating your mobile and desktop design independently. To help you do so we have created the side-by-side editor view in the Design App so you can see how changes are affecting each version of your site as you build it!

As you add assets to your desktop design, you will see those same assets added to your mobile design. This is why we suggest designing in the side-by-side view so you can tweak both versions as you go, leaving less to do when you are ready to fine-tune your mobile design. Items such as Canvas Height, Font Settings, element placement, and most other canvas settings are adjusted independently between your mobile and desktop design. 

Mobile & Desktop Design Tools

There are also built-in options for adding or removing elements from either your mobile or desktop design.

Toggle Switches

You can show or hide elements within your canvases between the mobile or desktop design by using toggle switches found in the left side Properties Panel next to each element layer on each canvas. There are two toggle switches; one looks like a mobile device and the other like a computer monitor. These switches control if elements are visible on the desktop and mobile design. These icons, when white, indicate that element is visible on the respective version of the site for which the icons are white. If they are greyed out, that means that element is off for the respective design.

Visible On...

You can also hide an entire canvas from either your mobile or desktop design. This can be done by going to the Page Tab in the left side Site Panel and clicking on the three dots to the right of the canvas' name, then unchecking one of the boxes that reads Visible On... to remove the visibility of that entire canvas from either design.

Layout Mobile

There is a built in design tool that will allow you to copy over design settings and the relative position of elements within a canvas. Check out this article here for more information.

Did this answer your question?