Watch this short 20-second video to learn how to optimize your Doc for mobile.

​

Turtl automatically generates a mobile version of your content. You can see what this mobile version looks like at any time by clicking the mobile preview button in the top right of the editor.

If your Surf image isn't in the right place on mobile view, simply crop and move the image. Don't worry about the effect of this on your desktop version - your mobile image crop won't change the Surf image in your desktop view. This means you can make sure your image is in the perfect place on both views.

You can click and drag your content to change the order it appears on mobile.

There are three settings that you can change for images specifically in mobile view:

Let’s go through each of them below.

There are three display options available for mobile.

Bleed makes the images go all the way to the edge of the screen:

Inset keeps the regular margin/gutter on the left and right:

Hide doesn't show the image on mobile at all. It will only be displayed on the desktop version:

These settings are also available on widgets like feature boxes and polls.

You can change the width of the image to reduce it to a percentage of its full size, e.g. 80% or 50%.

Change the alignment settings to move your image to the left, center, or right.

Accessibility within Turtl is making sure that your Turtl Docs are usable by as many people as possible. It’s important to keep in mind the order of your Immerse content in the editor to ensure it flows correctly for screen readers and when using the keyboard tab button for navigation. The easiest way to see how your Immerse content flows is by checking your Turtl Doc in mobile view. The order reflected in the mobile view is the same order that will be used for accessibility purposes. You can read more about Turtl Docs and accessibility here.

Watch this video on how to amend Surf image compatibility for desktop and mobile or read the Q&A on mobile design by a professional designer.