Kadence Blocks IE11 Compatibility

January 13, 2021

Compatibility requests with older browsers are becoming less frequent, but we had another one recently, and I wanted to give it a try while still utilizing our favourite plugins.

We use Kadence Blocks in our Gutenberg websites a lot, and I wanted to keep using it instead of spending additional development time building custom blocks that would suit this purpose.

For each of the columns, flexblox needed to have a width and fallback setup.

Note: Block specific custom column widths need to be setup separately.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /** IE 10 & 11 **/
	
	.kt-row-column-wrap {
		overflow: hidden;
	}
	
	
	.kt-has-1-columns .wp-block-kadence-column.inner-column-1 {
		width: auto!important;
		display: block;
		margin: auto;
	}
	.kt-has-1-columns .wp-block-kadence-column.inner-column-1 .kt-inside-inner-col {
		display: block;
		width: auto;
		margin: auto;
	}
	
	.kt-has-2-columns .wp-block-kadence-column.inner-column-1,
	.kt-has-2-columns .wp-block-kadence-column.inner-column-2 {
		width: 50%!important;
		float: left;
		display: inline!important;
		margin: 0!important;
	}
	
	.kt-has-3-columns .wp-block-kadence-column.inner-column-1,
	.kt-has-3-columns .wp-block-kadence-column.inner-column-2,
	.kt-has-3-columns .wp-block-kadence-column.inner-column-3 {
		width: 33%!important;
		float: left;
		display: inline!important;
		margin: 0!important;
	}
	
	.kt-has-4-columns .wp-block-kadence-column.inner-column-1,
	.kt-has-4-columns .wp-block-kadence-column.inner-column-2,
	.kt-has-4-columns .wp-block-kadence-column.inner-column-3,
	.kt-has-4-columns .wp-block-kadence-column.inner-column-4 {
		width: 24%!important;
		float: left;
		display: inline!important;
		margin: 0!important;
	}
	
	.kt-has-5-columns .wp-block-kadence-column.inner-column-1,
	.kt-has-5-columns .wp-block-kadence-column.inner-column-2,
	.kt-has-5-columns .wp-block-kadence-column.inner-column-3,
	.kt-has-5-columns .wp-block-kadence-column.inner-column-4,
	.kt-has-5-columns .wp-block-kadence-column.inner-column-5 {
		width: 19%!important;
		float: left;
		display: inline!important;
		margin: 0!important;
	}
	
	.kt-has-6-columns .wp-block-kadence-column.inner-column-1,
	.kt-has-6-columns .wp-block-kadence-column.inner-column-2,
	.kt-has-6-columns .wp-block-kadence-column.inner-column-3,
	.kt-has-6-columns .wp-block-kadence-column.inner-column-4,
	.kt-has-6-columns .wp-block-kadence-column.inner-column-5,
	.kt-has-6-columns .wp-block-kadence-column.inner-column-6 {
		width: 14%!important;
		float: left;
		display: inline!important;
		margin: 0!important;
	}

	.kt-inside-inner-col {
		max-width: 95%;
		width: auto;
		display: block;
	}
}