Making a mobile optimised site

Running Time: 02m 12s

 

This video shows you how to make elements appear on mobile only.

NB Click on Image in the bottom right of the video to view fullscreen

About this video

This video assumes you are already logged into the Sketchanet editor. If you don't know how to do this, you can find out how here

 

While the Sketchanet layout engine automatically adjusts your content to fit any device, there may be scenarios where you might want to use a different image / text combination on mobile compared to desktop. For example, on a very wide screen a letter box shape image can look really good, but on a very narrow portrait shape screen, this same image might look too 'short' in the balance of the page. To address this, we can use an image with a different crop - one that is more square than letterbox.

 

The Edit Visibility button allows you to specify that certain sections or cells should only display on mobile, and use your alternative image crop in this section or cell. At the same time you would specify that the desktop alternate should only display on non-mobile sizes. For the purposes of this mobile / desktop categorisation, we define the boundry width as 620px.