We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

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

14 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
On my sites, I always set background color for columns not addons, so they are equal if we talk about height.

+ padding inside addons
+ margin between column

My VIDEO: https://www.youtube.com/watch?v=acZCjxEB3K4

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.

Giorgio

More than a month ago #Permalink
Hello :)
I use medico theme and i have a problem.

On row options -> General, CSS Class i have this: equal-addons

i try on template.css this code.

.equal-addons .sppb-column-addons > div {
height: 170px;


Only changed 260 to 170 but no luck. When i see the content in mobile view, i continoue to have 260px height. How to fix it? Could you help?
Thank you

Giorgio

More than a month ago #Permalink
After 2 hours, i found no solution yet

Pavel

More than a month ago #Permalink
Hi.
First - never edit template.css. Create custom.css for your code (read Helix documentation about custom.css).

Second - provide a link to your website and specify row where you do it.

Giorgio

More than a month ago #Permalink
Hi.
First - never edit template.css. Create custom.css for your code (read Helix documentation about custom.css).

Second - provide a link to your website and specify row where you do it.


Thank you Pavel for your reply.
You're right. i tried also custom but for some reason i dont get results. What is the correct css class to set height on equal-addons?

Also I build my website on xampp at the moment, not uploaded yet on a server.

Lines i tried to change on Medico template, line 1834 and 1835.

Could you help?

Pavel

More than a month ago #Permalink
You're right. i tried also custom but for some reason i dont get results. What is the correct css class to set height on equal-addons?

You can determine this by using the drowser code inspector. And right in the inspector to write code that would check it works.
I modeled your case. Here is...

1.jpg

Write code for that right in the inspector.
And you get add-ons of the same height.
2.jpg

In order to hide the text outside use overflow property.

3.jpg

Than copy code and paste in custom.css.

As well, you can refer to each of the addon's part itself.

4.jpg

Attachments (4)

  • 1.jpg
    1.jpg 379.1 KB
  • 2.jpg
    2.jpg 536.8 KB
  • 3.jpg
    3.jpg 312.7 KB
  • 4.jpg
    4.jpg 230.5 KB

Giorgio

More than a month ago #Permalink
Thank you guys, with your help i managed to solve the problem


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

123

Templates

327851

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