Knowledge Base Parta.io
  • Go to Parta.io
  • Parta.io
    • Knowledge Base
  • 🚀Start Here
    • Create Account
    • Home Dashboard Overview
      • Parta.io Functionality
      • Profile Settings
    • Glossary
  • ✍️COURSE BUILDER
    • Course Menu Overview
    • Build a Course
      • Create a Course
      • Create a Course Structure
      • Edit a Course Structure
    • Edit Project Sections
      • Edit Cover
      • Edit Contents page
      • Edit Quiz
        • Create quiz
        • Create quiz in content page
        • Add feedback
      • Move Sections between Courses
    • Edit Project Blocks
      • Add Blocks
      • Block Actions and Settings
    • Interact with Resources
      • Actions with Resources
    • Customize Block Elements
      • How to Use Simple Elements
        • Rich-text
        • Image
        • Video
        • Audio
        • File
        • Divider
        • Link
        • Button
        • Embedded code
      • How to Use Complex Elements
        • Table
        • Lists
        • Charts
        • Accordion
        • Active labels
        • Slider
        • Tabs
        • Slide reveal
        • Grouping
        • Card
        • Complex list
        • Simulations
    • Course translation
      • Localize a course manually
      • AI-Powered Translation
      • Connect Integration to Phrase
      • Translate projects with Phrase
      • Manage translations
  • 🖌️NO-CODE EDITOR
    • Create a unique block design
      • Basic entities: root, row, column, element, absolute
      • Basic entities settings
      • Add columns and elements to blocks
      • Add background layers using Absolute
    • Customize advanced element settings
      • "Grid" tab
      • "Element" tab
      • "Data" tab
    • Customize content for various screens
    • Actions with elements in Pro mode
  • 📝CUSTOM TEMPLATES
    • Create and Save Templates
    • Organize Templates into Collections
  • 🎨BRANDING
    • Branding Overview
    • Create Branding Theme
    • Apply Branding Theme
    • Actions with Branding Themes
    • Change Branding Theme in specific course
    • Upload own Fonts
  • 🤝COLLABORATION
    • Real-time Collaboration Overview
    • Invite Colleages to Collaborate within Course
    • Lock Sections from Editing
    • Manage Comments and Discussion
    • Navigate Version History
  • 🔎REVIEW
    • Create Public Link for Reviewing
    • Create Public Link for Commenting
    • Hide Sections before Sharing
  • 🗃️SHARED STORAGE
    • Resource Types, Storage Types
    • Organize Projects and Resources into Folders
    • Share within one company
    • Share outside company
  • 📅TASK MANAGEMENT
    • Create tasks
    • Track Projects Progress
    • Actions with Tasks
  • 🏢WORKSPACE MANAGEMENT
    • Set up Company Settings
      • Single Sign-on (SSO)
        • Set up SSO in Parta.io
    • Manage Company Users
    • Create Company Subaccounts
  • 📤Export
    • Export Courses
      • Export to LMS
      • Export PDF
    • Exclude Course Sections from Export
    • Navigate Export History
    • Update Courses in LMS
    • Debug Courses
    • Integration with LMS
  • 🔑Hot Keys
    • Keyboard shortcuts in Parta.io
  • ❓FAQ
    • How to change the number of attempts in the quiz
    • How to manage tasks
    • How to restore a deleted block
    • How to add a template to Favorites
    • How to attach a SCORM package in the Parta.io course
    • How to add a user to only one project
    • How to restrict course navigation for students
    • How to create a perfect Image Template
  • 🎨Branding management
    • Introduction
    • Create branding
      • Theme
        • Color scheme
        • Border and shadow
        • Logo
      • Typography and fonts
        • Add your custom fonts
        • Responsive design
      • Section
        • Header
        • Side panel
        • Section paddings
        • Test progress
        • Margins within the quiz
        • Answer feedback
        • Navigation buttons
        • Modal windows
      • Elements
        • Image
        • Audio
        • Video
        • List
        • Button
        • Divider
        • Table
        • Figure
        • Active labels
        • Card
        • Tabs
        • Accordion
        • Slider
        • Grouping
        • Slide reveal
        • Chart
        • File
        • Link
        • Simulations
        • Contents
        • Progress bar
        • Single choice
        • Multiple choice
        • Order
        • Mapping
        • Keyboard input
        • Image hotspot
        • Feedback
        • Quiz progress
        • Quiz description
        • Quiz status
    • Manage branding
    • Rebranding
Powered by GitBook
On this page
  • Direction
  • Order
  • Hide

Was this helpful?

  1. NO-CODE EDITOR

Customize content for various screens

Configuring the way content displays for various device screens is effortless in PRO mode. Content can always be displayed exactly how you want it to be.

Previous"Data" tabNextActions with elements in Pro mode

Last updated 11 months ago

Was this helpful?

Here it's important to know the following terms: section, cover, content page, quiz, block, and element. Please see the if you're unfamiliar with them.

In the middle of the top panel of the Editor, you can toggle between content displays for web, tablet, and mobile devices.

The web version is selected by default, and often editing begins with this version. All display and style settings in the web version are automatically transferred to the tablet and mobile versions, and content adjusted to fit the rules of smaller screens.

Sometimes, you'll need to tweak how content looks on tablets and mobiles. Switching between these versions in the Editor makes it easier to adjust things like position, size, margins, colors, fonts and etc.

Tablet and mobile settings are kept separate and have no influence on one another; in other words, you can create a unique design for each version.

When switching to the tablet or mobile version, Rows and Columns will have additional settings: "Order" and "Direction."

These settings are quite helpful for managing how content looks on smaller screens and let you change the order of elements:

Direction

determines the overall numerical order for columns or rows. By setting the numerical order, you can control the sequence in which elements and element groups are displayed on the device screen.

Order

Order determines the overall numerical order for columns or rows. By setting the numerical order, you can control the order in which elements appear on the screen.

Hide

Hide is another helpful column setting for mobile screens (although it's available for web versions as well), which collapses content in a column. This lets you hide/show elements on any screen.

On the image below you can see an example when captions are different on tablet and mobile version.

To make this, add two columns with different text elements inside, and hide one column for a specific version.

Here is a gif-guide:

🖌️
glossary