Adapt a task for mobile devices

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

By default, the task is published only in the web version.

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 aren't suitable for mobile devices:
  • Tasks with embedded web pages (iframes).
  • Area selection in an image.
  • Video quality rating.
  • Tasks where you need to view large images.
  • Side-by-side image comparison where images should be placed next to each other on the screen.
  • Tasks where you need to type a lot of text.
Suitable tasks are classification, questionnaires, evaluation of small 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;
  }
}
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 on mobile devices in filters.

To run the task simultaneously in the web version and in mobile apps, add a filter:

To make a task available only in mobile apps, add the filter Client = Mobile Toloka.