Responsive Utilities

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

Using Touch Class

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

.device-touch img { display: none; }

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:

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

Note: Make sure that if you intend to use the Responsive Classes Functionality, then you add the data-class-* Variations for all the Devices, since this will ensure that your Defined Classes are Applied on Window Load of that Particular Device as well.

<a href="#" class="button" data-class-lg="button-large" data-class-lg="" data-class-md="button-xlarge" data-class-sm="button-small" data-class-xs="button-mini">Button</a>

Last Modified: October 21, 2020

Need Help?