[Bug]: Layout Issue in Profiles Advanced View

[SigurdTheBruce]

Contact Details

jonpb@bu.edu

What happened?

There is a display issue with the grid on the profiles page in 'advanced' layout view. Examples: https://www.bumc.bu.edu/derm/meet-our-expert-clinical-and-research-faculty/
https://www.bu.edu/dental/about/people/

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[timkingbu]

@SigurdTheBruce This is a CSS bug. I can change this in responsive-foundation/burf-customizations/profiles
/_profile-format-advanced.scss at

responsive-foundation/burf-customizations/profiles/_profile-format-advanced.scss

Lines 74 to 91 in 5d5a11a

	.profile-item-advanced {
	@extend %col-xs-#{$_profile-adv-cols-xs};
	@extend %col-md-#{$_profile-adv-cols-md};
	@include breakpoint( $md ) {
	&:nth-child( #{$profiles-advanced-cols-md}n+1 ) {
	clear: left;
	}
	}
	&:nth-child( #{$profiles-advanced-cols-xs}n+1 ) {
	clear: left;
	@include breakpoint( $md ) {
	clear: none;
	}
	}
	}

(though I am not sure what themes it would affect) or just put in an overwrite in any themes we find the bug (like dental and derm)

[timkingbu]

Proposed solution, change the order the specificity issue seems to resolve itself:

.profile-item-advanced {
	@extend %col-xs-#{$_profile-adv-cols-xs};
	@extend %col-md-#{$_profile-adv-cols-md};

	&:nth-child( #{$profiles-advanced-cols-xs}n+1 ) {
		clear: left;

		@include breakpoint( $md ) {
			clear: none;
		}
	}

	&:nth-child( #{$profiles-advanced-cols-md}n+1 ) {
		@include breakpoint( $md ) {
			clear: left;
		}
	}
}

[corinmiller]

I added custom css to fix https://www.bumc.bu.edu/derm/meet-our-expert-clinical-and-research-faculty/. It appears that .profile-format-advanced isn't picking up the styles in css-grid-base mixin:

responsive-foundation/burf-base/grid/_grid-mixins.scss

Lines 250 to 281 in 5d5a11a

	@mixin css-grid-base( $masonry: false, $flexible-columns: false, $flexible-column-minimum: 200px ) {
	@supports ( display: grid ) {
	display: grid;
	// The minmax below prevents grid items from overflowing container.
	grid-template-columns: repeat( $grid-number-columns, minmax( 0, 1fr ) );
	grid-gap: $grid-column-padding;
	margin-left: auto;
	margin-right: auto;
	@media screen and ( max-width: $xs ) {
	// Because CSS Grid factors grid gap values into the total width of
	// the grid container, if we do not set this to a lower value on very
	// small devices, content will be cut off on those devices.
	grid-gap: 300px / $grid-number-columns;
	}
	@if ( $masonry == true ) {
	grid-auto-flow: dense;
	}
	@if ( $flexible-columns == true ) {
	grid-template-columns: repeat( auto-fit, minmax( $flexible-column-minimum, 1fr ) );
	> * {
	@include breakpoint( $xs ) {
	grid-column: auto / span 1;
	}
	}
	}
	}
	}