Responsive Content Settings

Estimated reading time: 2 min

While making a website or creating a course for users, we always strive to make it responsive. We ensure that it looks perfect in all devices, and the content on the page comes up clearly.

In GrassBlade xAPI Companion v2.0, we made xAPI content more responsive and fluid. In this new update, your content will show up elegantly in all different devices.

Now, you can set the content aspect ratio with popular preset sizes like in 16:9, 4:3, and 1:1. With this, you can fix the aspect ratio to show content in a fixed ratio in different screen sizes.

Aspect Ratio Settings

Find this setting: xAPI Content edit page > xAPI Content Details > Override Global Settings

If you don’t want to use these presets, you can set it with your desired content aspect ratio. Alternatively, you unlock the aspect ratio to make content more fluid.

For LearnDash User:
In Focus mode, if you don’t see the content in full width. You can change the page width settings from /wp-admin > LearnDash LMS > Settings > General > Focus Mode > Focus Mode Content Width. View Screenshot

How to use?

Example 1: Responsive Content – Videos

Videos are responsive and have a fixed aspect ratio, so let’s say you have used YouTube video which has a 16:9 (or 1.7777) aspect ratio. Your settings would be:

  1. Lock Aspect Ratio: Checked.
    (clicking 16:9 will automatically set height based on width.)
  2. Width: 100%
  3. Height: 56.25%

Based on your UI and preference, you can change the Width/Height in the same ratio.

Example 2: Fluid Content – Articulate Rise 360

Articulate Rise 360 content is fluid and works with any aspect ratio. So, you might want to keep it fluid. Your settings would be:

  1. Lock Aspect Ratio: Checked.
    (clicking 1:1 will automatically set height based on width.)
  2. Width: 100%
  3. Height: 100%

Based on your UI and preference, you can change the width and height to a smaller value like 90%.

Example 3: Non-Responsive – Articulate Storyline 2

Contents that are fixed size and non-responsive like Articulate Storyline 2 (especially the flash version) do not work well with a responsive container and you would want to have a fixed size setting for them. For example, if you have a content of size 960 x 640px. Your settings would be:

  1. Lock Aspect Ratio: Unchecked.
  2. Width: 960px
  3. Height: 640px

In this mobile world, every other person is using multiple devices. To make the user experience more smooth, we have to provide support for all type of screen sizes.

At Next Software Solution, we also believe in interoperability and smooth user experience. Our team is always ready to make the necessary changes to meet the latest design and technology trends.

Hope you find these features useful. If you have any comments, suggestions, or feature requests feel free to drop a message in the comment section below or contact us.

Follow us on FacebookTwitter, and LinkedIn for more latest and quick updates.

Was this article helpful?
Dislike 0 2 of 2 found this article helpful.

5 thoughts on “Responsive Content Settings”

    1. Hi Konstanty,
      For previous content, it will depend on existing settings (for ex: in page will be responsive). You can test new settings on one content, then perform a bulk update from bulk settings.


    1. Saurabh Chauhan

      Hi Pascal,
      it completely depends upon your content, to understand the best fit for your content you can try multiple combination of responsiveness settings.


Leave a Reply

Your email address will not be published. Required fields are marked *

Shopping Cart
Scroll to Top
We are making major changes on payment options & license management. Please, click here to report any issues you face during the purchase.