How can i set equal height to the icon boxes of a same row ? Fix background colo

Hey Deanna,
I tried to take a look, but I could only see the maintenance page, please provide a login in the Private Content area.

Best regards,
Mike

Hi,
I took a look at your page and a found a interesting problem, you are using equal height columns, but you are adding a background color only to the icon-box element inside of the columns.
If you look at your columns closely you will see a 1px black border drawn around the icon-boxes, which is equal height.
If we give the columns a background color this would be solved, but it seems you like the way the icon sticks out of the box on top.
So I added a custom class to the grid row with the 3 columns “equal-icon-box” and a custom class to the cell above them “top-height” and then this css:

@media only screen and (min-width: 767px) { 
#top.page-id-312 .equal-icon-box .av_one_third {
padding-top: 0px !important;
background-color: #f8f8f8 !important;
}
#top.page-id-312 .top-height {
margin-bottom: 100px !important; 
}
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
You could remove the page id from the css and add the same classes to the elements on the other pages, if you take a look at the back end for those two classes on that page, you’ll see how to model it for your other pages. Let us know if you have any trouble, and I’ll try to explain better with screenshots.

Best regards,
Mike