common-height not on smaller resolutions

2 replies · opened Oct 26, 2016

Aamadeus77Oct 26, 2016

I thought that the common-height feature only applies on higher resolutions (beginning from 992)... but it seems that it's apllied to the smaller resolutions as well... on mobiles this looks a little strange (depending on the content). Is there a way to only apply to smaller resolutions?

I tried:
data-class-lg="common-height" data-class-md="common-height" data-class-sm="" data-class-xs="" data-class-xxs=""

But this does not work!

Thanks for help!

SSemicolon WebSTAFFNov 2, 2016

Hello,

It is Definitely Possible to disable the Common Height on Mobile Devices. Please find the following code in the js/functions.js File:

commonHeight: function( element ){
	var maxHeight = 0;
	element.children('[class*=col-]').each(function() {
		var element = $(this).children();
		if( element.hasClass('max-height') ){
			maxHeight = element.outerHeight();
		} else {
			if (element.outerHeight() > maxHeight)
			maxHeight = element.outerHeight();
		}
	});

	element.children('[class*=col-]').each(function() {
		$(this).height(maxHeight);
	});
},

and replace it with:

commonHeight: function( element ){
	var maxHeight = 0;

	element.children('[class*=col-]').each(function() {

		if( $body.hasClass('device-sm') || $body.hasClass('device-xs') || $body.hasClass('device-xxs') ) { return false; }

		var elementChild = $(this).children();
		if( elementChild.hasClass('max-height') ){
			maxHeight = elementChild.outerHeight();
		} else {
			if (elementChild.outerHeight() > maxHeight)
			maxHeight = elementChild.outerHeight();
		}
	});

	element.children('[class*=col-]').each(function() {
		if( $body.hasClass('device-sm') || $body.hasClass('device-xs') || $body.hasClass('device-xxs') ) {
			$(this).css({ 'height': '' });
		} else {
			$(this).height(maxHeight);
		}
	});
},

This will definitely work fine. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Aamadeus77Nov 2, 2016

Works like a charm!
Thanks!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard