Text box height

Hey GFMutiny,
Instead for using 5 columns each containing a image, text, and button. Try creating 5 columns in a row for your images, then columns in a row for your text, and 5 more columns in a row for your buttons. Then in the settings for the first column in each row choose “Equal Height”
Here is a screenshot of the editor:

Each row of columns will be equal height and responsive, here is a screenshot of the front end:

I found that there is no added top and bottom margin or padding for each column so the elements look natural.

For mobile devices I created 5 more columns below, each with images, text, and buttons and I added a Custom Class “eh-mobile” to hide these columns in desktop view, where the other columns have a custom class “eh-desk” to hide from mobile view.

Here is the css to hide the elements at the brake points:

@media only screen and (max-width: 766px) {
.eh-desk {
display:none !important; 
}
}
@media only screen and (min-width: 767px) {
.eh-mobile {
display:none !important; 
}
}

If you would like to test the page I created for this example, you can download it here: equal height column test debug code.txt
and add the code to your site by Enabling the Avia Layout Builder Debug

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
and the video tutorials here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike