Responsive Utilities

Canvas is Fully Responsive and exciting Responsive Features are bundled within the Template waiting to be explored.

Types of Responsive Classes

  • Device Classes
    • .device-xxl – Class for Devices more than >=1400px
    • .device-up-xxl – Class for Devices more than >=1400px
    • .device-down-xxl – Class for Devices less than <1400px
    • .device-xl – Class for Devices from >=1200px to 1399.98px
    • .device-up-xl – Class for Devices more than >=1200px
    • .device-down-xl – Class for Devices <1200px
    • .device-lg – Class for Devices from >=992px to 1199.98px
    • .device-up-lg – Class for Devices more than >=992px
    • .device-down-lg – Class for Devices <992px
    • .device-md – Class for Devices from >=768px to 991.98px
    • .device-up-md – Class for Devices more than >=768px
    • .device-down-md – Class for Devices <768px
    • .device-sm – Class for Devices from >=576px to 767.98px
    • .device-up-sm – Class for Devices more than >=576px
    • .device-down-sm – Class for Devices <576px
    • .device-xs – Class for Devices from 0px to 575.98px
    • .device-up-xs – Class for Devices more than 0px
    .device-down-lg .background-position-class { background-position: left center !important; }

.device-up-lg .background-position-class { background-position: center bottom !important; }
    Note:

    Device Classes are applied to the <body> tag.

  • Touch Devices

    Define your Custom Styles specifically on Touch Devices using the .device-touch Class.

    .device-touch #page-title {
	display: none;
}
    Note:

    Touch Classes are applied to the <body> tag.

Responsive Absolute Heights

This is a Very Interesting Feature of Canvas of defining Responsive Heights. But it is recommended that it is used only on the Absolutely positioned elements as the Relatively positioned elements are auto-heights. You can define Responsive Heights for an Element using the data-height attribute:

  • data-height-xl – Height for Large Devices >=1200px
  • data-height-lg – Height for Medium Devices >=992px to 1199px
  • data-height-md – Height for Tablets
  • data-height-sm – Height for Landscape Mobiles or Phablets
  • data-height-xs – Height for Portrait Mobiles

Note: Width of the Image is flexible depending on the Parent Container. Now, the Large Device will have the Default Height of your Image and the other heights can be checked simply by resizing your browser to see the image heights change, so you can define the other heights accordingly. We guess, this will surely serve you well.

<div style="position: relative; margin-bottom: -60px;" class="ohidden" data-height-xl="426" data-height-lg="567" data-height-md="470" data-height-sm="287" data-height-xs="183">
	<img src="images/services/main-fbrowser.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="100" alt="Chrome">
	<img src="images/services/main-fmobile.png" style="position: absolute; top: 0; left: 0;" data-animate="fadeInUp" data-delay="400" alt="iPad">
</div>

Responsive Classes

Now you can add Responsive Classes to an Element that switches on Different Devices. You can define Responsive Classes for an Element using the data-class attribute:

<a href="#" class="button" data-class="sm:button-small lg:button-large xl:button-xlarge">Button</a>
All the Class can be applied within the data-class Attribute from the Devices Responsive Classes. Simply use the responsive identifiers without the device- prefix. For Example, for .device-up-lg Classes, use data-class="up-lg:button-large"

Last Modified: October 1, 2023

Need Help?