Six Column Section with Equal Height

Hi, enfold people!

I am using some custom css to create a six-column section. I got the code from another thread, it looks like this:

#six .flex_column.av_one_fifth {
width: 14.5% !important;
margin-left: 2% !important;
} 
#six .flex_column.av_one_fifth.first {
clear: none !important;
margin-left: 2% !important;
}
#six .flex_column.av_one_fifth:nth-child(6) {
margin-top: 0 !important;
}

I would like to set all columns to be equal height (I like how it is responsive at different screen resolutions), but when I select this setting from the first column, it seems to break the css code and the sixth column gets pushed off.

Is there something I can add to my css to set equal columns, or is there another way to fix this?

This site is in progress, on a local server… so I can’t ask you to log in and check it out.
Here are screenshot of the issues:
Regular view (perfect): https://www.dropbox.com/s/fkrqrmkxgahwske/1%20-%20regular-widescreen.JPG
On a smaller browser: https://www.dropbox.com/s/rks8hickslhx2hq/2%20-%2019-inch-monitor.JPG
“Equal Height” Set: https://www.dropbox.com/s/zdrl0vtqpyjyv8m/3-%20equal-height-setting.JPG

• This topic was modified 7 years, 6 months ago by DTC-sites.