Skip to main content

Responsive Behaviour

Content created in Course Creator adapts automatically to different screen sizes, including mobile, tablet, and desktop. Layouts are adjusted based on available space, while keeping the content structure intact.

How layouts adapt​

Containers are rearranged vertically on smaller screens.

  • On desktop, containers are shown side by side
  • On mobile, containers are stacked from top to bottom The order of containers is based on their position in the layout.

Container order​

When a layout includes multiple containers:

  • The left container is shown first on mobile
  • Additional containers follow in order from left to right This applies to all layouts with two or more containers.

Layout examples​

Use the examples below to see how layouts behave across different screen sizes.

One container​

Displays the same across all devices

Two containers​

Desktop: side by side Mobile: left container appears first, then the right

Three or more containers​

Desktop: arranged in columns Mobile: stacked in order from left to right

Content priority​

Place the most important content in the left container.

  • On mobile, this content is shown first
  • Less important content can be placed in containers to the right If images or graphics are the main focus, place them in the left container. This ensures they are visible first on smaller screens.

Design considerations​

Keep the following in mind when designing for different devices:

  • Avoid large blocks of text on a single page
  • Break content into smaller sections when targeting mobile users
  • Ensure important content appears early in the layout