Even Boxes in Contact Form

[BettyPC]

I am doing a contact us page like your “contact us example 2” with the 3 icon boxes side by side. Trying to even my box height because some boxes have more content than others.

http://themeforest.net/item/dante-responsive-multipurpose-wordpress-theme/full_screen_preview/6175269

I tried:
br
p
returns

Nothing works. I only need 1 more return to equal my box. How do I do that?

[Kyle – SUPPORT]

Please can you provide me with a link to the page?

You can set a minimum height to the boxes so that they are all equal size.

– Kyle

[petebulley]

How do you set the minimum height?

[Kyle – SUPPORT]

Add this to your custom css:

.page-id-6796 .sf-icon-box-content-wrap {
  min-height: 250px; 
}

Change the page id for the page id of your contact page, which you can find in the body tag.

Adjust the min-height value so that it works for you.

– Kyle

[BettyPC]

Thanks . . . that is what I needed 🙂

[Kyle – SUPPORT]

Great!

[joerg]

Hi Kyle,

I hope it’s okay to reopen this thread. Your solution is great when there is only one area with icon boxes on the page, but e. g. on a one pager you usually have several areas with icon boxes, and they may vary in the length of their contents significantly. It would be great to be able to set the height on a per icon box basis or something like an icon box area basis.

Regards

[Kyle – SUPPORT]

Hi

You could use extra classes in your icon boxes and then target the individual boxes using the extra class

– Kyle

[joerg]

Hi Kyle,

sorry to have to ask, but how do I define that extra class in an icon box?

Regards

[Kyle – SUPPORT]

There is an extra class field in the page builder icon box element

Than in your css try:

.extraclass .sf-icon-box-content-wrap {
  min-height: 250px; 
}

– Kyle

[joerg]

Ah, now I got it! Thanks a lot!

[Kyle – SUPPORT]

Great! 🙂