Help with Classic Feature Box

Hi,
I have been trying for some time to figure out how to setup my Classic Feature Boxes like the ones on the following site
http://preview.themeforest.net/item/psychologist-personal-singlemulti-page-html-template-with-page-builder-and-admin-pages/full_screen_preview/19795162
Under the “What we can offer” section of the page, these look like Classic Feature boxes, but they are perfectly shaped and have a real cool animation (ease out of the page) when you hover on them.
Is there any way to achieve this using Cornerstone?

Thanks

Rod

Hi @Kingr67,

That’s possible with the custom CSS.

  • Please add the hover_shadow class to your Classic Feature Boxes:

  • Then add the following CSS under X > Theme Options > CSS:
.hover_shadow {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.hover_shadow:hover {
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

Hope that helps and thank you for understanding.

Thanks, that worked great. However is there a way for me to set the size of the selected box so that i can make them all uniform. The headings and text i am adding is of varying length and this changes the size of each feature box?
Thanks

Rod

Hi Rod,

Please provide us with the URL of page which you’re working so we can take a closer look.

Thank you.

Hi Rod,

There is no out of the box option available for the Classic Featured Box to have the same height.

The easiest option would be to set a min-height to all the feature boxes. To do this, add a common class to all the the feature boxes then set the min-height through CSS by adding this code in X > Theme Options > CSS:

.equal-boxes {
    min-height: 600px;
}

The code above assumed that the class you have added to the feature box element is equal-boxes.

A downside for this approach is that the min-height is a fixed value.

Another option that will require a bit of customization is to add a JS code that will scan all the feature boxes on the page and find the one tallest one and set it to the rest of the feature box elements.

You can refer to the code suggested here:

However, please note that the code in the link will set the same height to the column, so you will have to update the code.

For example. let’s say the class you have added to all the feature box is equal-box then the JS code should be:

jQuery(document).ready(function($) {
	var max = 0;
	$(".equal-box").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".equal-box").css('height', max);
});

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps you get started.

Hi,
Although this worked by making the columns that the Feature boxes are in the same size it didnt change the size of the actual feature boxes, the hover effect is applied to the feature box not the column it sits in. Any ideas?

Thanks

Rod

Hi Rod,

The actual code is just a representation of the idea. Please make sure that you have adjusted it accordingly to work on element feature boxes. You need to add the class equal-box on the feature box element and not columns. If it still not working we might need to access your site. Please set up an online staging site for us to do so. Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.