CMS Development

Trifecta
Participant

Custom "TEAM MODULE" layout breaking

SOLVE

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)

https://www.trifectanutrition.com/our-story

 

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

https://www.trifectanutrition.com/our-story-0

 

This is a webpage titled "Our Story Clone"

Any help would be greatly appreciated!

0 Upvotes
1 Accepted solution
DaniellePeters
Solution
Top Contributor

Custom "TEAM MODULE" layout breaking

SOLVE

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.

 

View solution in original post

0 Upvotes
3 Replies 3
ndwilliams3
Key Advisor

Custom "TEAM MODULE" layout breaking

SOLVE
.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.

0 Upvotes
DaniellePeters
Solution
Top Contributor

Custom "TEAM MODULE" layout breaking

SOLVE

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.

 

0 Upvotes
Trifecta
Participant

Custom "TEAM MODULE" layout breaking

SOLVE

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

0 Upvotes