Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Feature Box Equal Height

Featured Lock Resolved Issue
In using the feature box addon, I was expecting that the boxes would be equal height and I read in another post that the columns are supposed to default to equal height. But, this is what displays: http://take.ms/oHr7E

I haven't found a setting for it to match height. What am I missing?

Thanks,

karen

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Equal Height is for columns only
So maybe consider setting a white background for them

"How to use Columns Equal Height" from
https://www.joomshaper.com/documentation/sp-page-builder/sp-page-builder-3#how-to-tips
---
BTW
But you can also add empty enters to get extra white space.
Or
Use CSS to force min-height for addons.

Paul Frankowski - Staff

More than a month ago #Permalink
I guess, We cannot force Auto Equal Height for addons, because CSS/CSS3 engine is not so smart yet. :p

https://www.w3schools.com/howto/howto_css_equal_height.asp

Karen Dunne

More than a month ago #Permalink
I have been trying to add css to the addon but without result.

First: I checked to see which element it needed to be on, see http://take.ms/jJtRw

Second: I created a div class in the custom css file and placed it in the CSS field of the addon, see http://take.ms/KoetS

Third: I added custom CSS to the addon, see http://take.ms/0IFQu

None of those attempts worked.

Is it really the right approach to have to write the CSS for every addon feature box?

What is the appropriate CSS and what is the best, most efficient way to force the min-height of the feature box?

Thanks,

Karen

Paul Frankowski - Staff

More than a month ago #Permalink
Think, what area you have to be longer? Yes, text in white area.
So set min-height for it. Only for it.

Example:

.sppb-addon-feature .sppb-addon-text {min-height: 160px;}



Sorry, but we cannot teach CSS everytime.

Karen Dunne

More than a month ago #Permalink
For the sake of others who might be reading this post, and noticing that there are many questions in the forums regarding equal height, I wanted to add the solution here.

What I discovered was that I was using the dev inspector while in front end editing mode. This returned the wrong values for my css overrides, i.e., using min-height was correct but not 90% because once I was out of the builder the 90% was not enough. This led me to think I was using the CSS class field on the addon incorrectly, but in fact it was correct.

I wasn't asking to be taught CSS here and I think I gave a lot of solid examples of what I had done so far with what was the correct CSS approach.

Ultimately, an equal height option for the feature boxes would be very helpful to many users. YooTheme Pro has it as a toggle for the element and it makes dev time much easier.

In the end, I wrote raw HTML and used bootstrap card decks, see https://getbootstrap.com/docs/4.0/components/card/ and https://take.ms/UfRlz

For those trying to use the feature box addon and need them to be equal height, using bootstrap card decks could be a better option.

Paul Frankowski - Staff

More than a month ago #Permalink
Thanks Karen,
it's great if you use template based on Bootstrap 4, but some users still have Helix3 or others.

I will ask our developer to implement some CSS from BT4 and Cards support for Feature addon and Image Layout addon.

I fully agree it would be useful for all of us.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 133
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 93
Toufiq

Toufiq

Total Accepted Answers: 24
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289630

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us