Custom "TEAM MODULE" layout breaking

Develop, Build & Integrate CMS Development
,
1

Hi,

We have a Custom Module( Team Custom Module), built by Hubspot for our team members. The modules line up 3 to a row as desired, except for when I add the 12th module, the bottom formatting/alignment breaks and pushes modules to new rows.

Here is what it should look like but with one extra team member (Urijah faber)

Here is what it is currently doing when the new(12th)team member is added

This is a webpage titled “Our Story Clone”

Any help would be greatly appreciated!

2

This issue is due to this line of code which is clearing the float of the second to last team member module:

.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-last-child(2) .team-custom-module-wrapper {
 clear: both;
}

If those modules are always going to be in a three column layout, I recommed instead something like this:

.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-child(3n+1) .team-custom-module-wrapper {
 clear: both;
}

Although, you may be able to comment out that line of code entirely.

3

Thanks for you advice. It’s all looking proper now.

4 
.custom-story-row-four-flexi .hs_cos_wrapper_type_custom_widget:nth-last-child(2) .team-custom-module-wrapper {
 clear: both;
}

this line of css is breaking the layout. remove it from your stylesheet.