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

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 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 site, you will see those same assets added to your mobile site. 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 fine-tune your mobile design. Items such as canvas height, font settings, asset placement, and most canvas settings are completely independent on your mobile design. We've also built-in options for adding or removing elements specifically to one version of your site or the other. 

The first option is the mobile and desktop toggle switches, found in the left sidebar next to each element layer on each canvas. 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. 

The other option is to hide an entire canvas from one version of the site design. This can be done by clicking the three dots next to a canvas, then simply uncheck the box that reads, "visible on..." to remove the visibility of that entire canvas from the design you wish.

As you can see from the screenshot below, in the left sidebar of the Showit builder, under the page tab, when editing a canvas you will find all of the layers for the individual elements within that canvas. To the left of each layer 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. They can be turned on or off with a simple click: if the icon is white it indicates that element is on for the version of the design which has the white icon. If the icon is grey, this indicates that element is off for the given design. 

2. "Visible on" setting for an entire canvas:
For this tool, we are again in the page tab located in the Site Panel. You can show or hide an entire canvas from one version of your design by clicking the options menu (...) next to the canvas and using the "visible on" settings shown below. To hide a canvas from one version of your design simply uncheck the box. As shown in the image below, once a canvas is only visible on one version of the design an icon will indicate which version on the right side of the canvas layer. In our example below Navigation and Navigation Background are both visible on desktop only while Mobile Nav and Mobile Nav Background are visible on mobile only.