Submit a ticket My Tickets
Welcome
Login  Sign up
Open navigation

How to Set an Element's Visibility to Specific Devices - Device Visibility

The number one tool you have in your school is device visibility, meaning that an element can be visible to a specific set of devices. Visibility allows you to show or hide widgets, or even entire sections based on the device the user is accessing your site from.


Click on an element and navigate to the Actions in the sideform.

Choose if a whole section or a specific widget will be visible to a specific group of devices:

  • Desktop / Laptop 
  • Tablet Landscape 
  • Tablet Portrait  
  • Phone Landscape 
  • Phone Portrait 
This is ideal if you are looking to add extra paddings to a text box when it is viewed on phones only, or want to make a button smaller on tablets, or even change the appearance of the layout.


Additionally, you could have a button duplicated, but each button will have opposite visibilities (for example, one element will have Desktop and Tablet device enabled, and the duplicated button will only have Phone device enabled).
With this strategy, you can adjust each button to have a different layout for different devices!

Another great benefit is the possibility to adjust the size of a screen or image widget based on the device that the user is accessing the site from.


Notes: 

  • When creating a section or a widget that is intended to be viewed in another device apart from the desktop, it is suggested to first make all the necessary changes, and then apply the device visibility. As soon as you click on Apply device visibility, the element will then be visible only to the respective authoring devices, and only the Layout Tab will be available to further edit the element.
  • If you have selected a whole section to be visible only to specific devices, this will apply to the included widgets as well.
  • Device visibility is not supported in the top-bar menu, due to the different infrastructure of the settings. If you have already applied device visibility though, you can contact us at support@learnworlds.com to further assist you in reverting the changes.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.