Responsive Design
Claromentis is designed by following responsive design principles, which means it will be automatically switched to accommodate different screen resolution ranging from mobile, tablet or desktop.
Claromentis uses Bootstrap 3 framework to provide responsive design elements, in general, there is a 4 grid system depending on device width.
What is important is to test your content to check with the following screen resolution to ensure it is accessible across various devices.
Extra small devices
Phones (portrait) with (width up to 480px)
- Claromentis horizontal menu collapses and can be expanded via the menu icon located on the top left corner.
- Most content will be displayed in a single column.
Small devices
Tablets in portrait mode or phone in landscape mode (width less than 768px)
- The menu stays expanded but the search bar collapsed to provide more horizontal room
- Most content will be displayed in a single column.
Medium devices
Tablets in landscape mode or small laptop (desktops, 992px and up) with typical resolution : 1024px x 768 px, also known as XGA / iPad landscape resolution.
- Full horizontal menu
- Content will be displayed in the intended grid layout
Large devices
Desktop or large laptop with resolution (desktops, 1200px and up) with the typical resolution higher than 1280 pixel width, also known as WXGA, HD and up.
- Full horizontal menu
- Content will be displayed in the intended grid layout
- Depending on your design settings in Design panel, you can set content to expand to fill the screen or center-aligned.
How to test different resolution
Tips to plan your content for the responsive design
IFrame or Embed
Make sure iframe or embed content from YouTube or third party website are using width="100%" instead of hard-coded to a certain width in pixels.
Images
Images in rich editor area within Claromentis can be made responsive-friendly via the addition an extra responsive class class="img-responsive" to ensure the image is not cut off in a smaller device.
