Equal height for Hover-Color elements in one wrap

kirillrubinstein · March 2016

I have in one section 3 wraps each with 3 hover color elemets in one line. In the advanced section style dropdown I have chosen "Columns without Any margins ...".

I want that all 3 elements have the same height. Also in the responsive design when the window becomes smaller, the height should be adjusted to the highest item in the line.
I have tried to select "Equal Height of Items in Wrap" for section advanced style, but it had all just worsened. I got a problem with margins between the elements and the height also with normal window size was different.
Ist there any possibility to fix this?

kirillrubinstein · March 2016

the page url: http://www.kfz-steuer-2016.de

mjlaval · March 2016

Keep the Equal Height and try using this custom CSS:

.hover_color { height: inherit; }
.hover_color .hover_color_bg { height: inherit; }

kirillrubinstein · March 2016

Thank you. That works grat.
Is there any possibility to make the fancy_link sticky to the bottom (same spacing from the bottom of the hover_color box). So, also the links in the box stay at the same high?

kirillrubinstein · March 2016

And the last question

)) Is it possible to make the whole hover_color box as the link and not only the fyncy_link?

Albert · March 2016

@kirillrubinstein

1. What you can do only is remove bottom margin for these items with the following css:

a.mfn-link { margin: 0 25px !important; }

2. It is already whole link so we don't get what you mean exactly.

kirillrubinstein · March 2016

2. The link area, so where i can click, is only what is defined in fancy link in each hover color box. It would be perfect, if the whole area of a hover color box could be defined as a link area, so I can click everywhere in the hover box to get to the linked page ...

kirillrubinstein · March 2016

2. I got what you mean

)) It works perfectly

1. what ist "a.mfn-link" and where can I insert this css code?

Albert · March 2016

1. This is custom css and each custom css should be added under Theme options > Custom CSS & JS > Custom CSS section.

kirillrubinstein · March 2016

Thanks! Works all fine.

Equal height for Hover-Color elements in one wrap

Comments