Adapt a task for mobile devices

Note. The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a task interface in Template Builder.

By default, the task is available in both the web version of Toloka and the mobile app.

To run the task on mobile apps, follow these steps:

Step 1. Make sure that your task is suitable for mobile devices.
The following tasks don't work on mobile devices:
  • Tasks with embedded web pages (iframes).
  • Area selection in an image.
  • Video quality rating.
  • Tasks with large images.
  • Side-by-side image comparison where images should be placed next to each other on the screen.
  • Tasks that require typing a lot of text.
Tasks that work well on mobile devices include classification, surveys, evaluation of short texts, moderation of comments, and so on.
Step 2. Improve the display quality for tasks shown on mobile devices.

We recommend that you use the Template Builder. It will make it easier for you to adapt your tasks for mobile devices.

Add the following code to the CSS block:

@media screen and (max-width: 800px) {

 .task {
  width: 93%;

 }
 .popup__text {
  width:auto;
 }

 .field{
  white-space: normal;
  display: block;
  width: 100% !important;
 }


 br {
  display: none
 }
}

@media (pointer: coarse) {
  .field__hotkey, .inplace_instruction  {
    display: none;
  }
}
Copied to clipboard
This code changes the task interface for devices with the screen width of less than 800 pixels:
  • Accommodates all interface elements on the smartphone screen.
  • Makes sure that the hints don't go beyond the screen.
  • Removes keyboard shortcuts.
  • Adds line breaks for fields.
  • Removes empty rows.
Step 3. Check how the task will be displayed on mobile devices.
  1. Press F12 or right-click anywhere on the page and choose Inspect.
  2. Click the phone and tablet icon to enable display mode for mobile devices.
  3. See what the task looks like on popular mobile platforms.
For more information, see the browser documentation.
Tip. If the task doesn't display well, go back to the CSS block and add the missing styles to @media screen and (max-width: 800px). If you aren't familiar with the CSS and HTML languages, use professional services or contact support. For more information, see Get help creating a project.
Step 4. When adding a task pool, enable display only on mobile devices in filters.

Tasks in pools will automatically be available in the web version of Toloka and the mobile app. If you want to change the default settings and limit the visibility of the task for any of the versions, add the Client and select the desired value: Toloka web version or Toloka for mobile.