Skip to main content
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

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 tools for customizing your Mobile and Desktop design independently, or removing elements or even entire canvases from one layout or the other.

Synching or Splitting Settings

If you would like specific aspects of your site to look one way on your desktop layout and another way on your mobile layout, you can use the sync or split your designs. This function can be utilized to split or sync the Desktop and Mobile Design for different types of design elements and features within Showit.

To sync or split your desktop and mobile design, simply hover your cursor over the item you would like to change.

You can see this in action below:

If you decide that you would like to sync your desktop and mobile design once more you can do so by clicking on the same three dots and choosing to Merge.

Note: If you choose to merge while you have the mobile design selected, it will apply your mobile design to both layouts. If you have your desktop design selected, it will apply your desktop design to both layouts.

You can use this function on a variety of features within the Showit Design App. For more information, check out this article here:

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.

Hide a Canvas Using 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?