min-vh-md-100 (e.g) not available with sass

1 reply · opened Jan 21, 2021

Aamadeus77Jan 21, 2021

Hi,

I am using the sass version. No problems when compiling the css from all the sass files. All classes from bootstrap are available. But the min-vh-(breakpoint)-(size) classes are not available. Only the min-vh-(size) classes. So the breakpoint variants are not there!??

What could be the promblem?

SSemicolon WebSTAFFJan 21, 2021

Hello,

Thanks so much for reporting this to us and Apologies for the Inconveniences caused!

There is a Minor Bug with the code. Please replace the entire block of the Height Utility Classes in the sass/_utilities.scss File with the following code:
[ch_pre]/* ----------------------------------------------------------------
Height Utility Classes
-----------------------------------------------------------------*/
@if $vh-elements {
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

		@each $value in $vh-elements {

			.min-vh#{$infix}-#{$value} {
				min-height: #{$value}vh !important;
			}
			.vh#{$infix}-#{$value} {
				height: #{$value}vh !important;
			}
			.max-vh#{$infix}-#{$value} {
				max-height: #{$value}vh !important;
			}
			.h#{$infix}-#{$value} {
				height: #{$value * 1%} !important;
			}
		}

		.max-vh#{$infix}-none {
			max-height: none !important;
		}

		.h#{$infix}-auto {
		    height: auto !important;
		}
	}
}

}[/ch_pre]

This will definitely fix the issue. Hope this Helps!

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

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