Product box size

[Mike101za]

Hi,

I am using Crosshatch skin.

Depending on the Product description, the height of the box changes.

Is the any way to standardize the size of the product boxes to eliminate the size discrepancy?

It must also be in Sub and sub sub categories if possible.

Thank you

Mike

 

[bsmither]

There is a discussion that puts the Description just above the Customer Reviews. This mostly stabilizes the variability in height of the product's details to the right of the image gallery.

Putting the Description below the top matter also gives you far greater freedom in what can be included in the Description.

[Mike101za]

Thank you BSmither,

 

I do not wish to change anything on the layout of the boxes. I would like to make all the product display boxes the same size in Crosshatch.

I only have a height change when the description length changes.

Is there no CSS file for this?

Thank you

Mike

 

[bsmither]

Maybe I am confused. You say "display box" but also "product description".

Do you instead mean "Product Name" (aka "Product Title") affecting the height of the product "panels"?

So, we need to install an "equalizer". There are several available. Here are a couple:
https://github.com/CSS-Tricks/Equalizer
https://github.com/liabru/jquery-match-height

Let's use the one from CSS-Tricks. (Both solutions seem limited in that the panels per row are equalized to the tallest panel in that row. Meaning, row 1 is equalized at 212px, row 2 is equalized at 221px, etc.)

Copy jquery.equalizer.min.js into Cubecart's /js/vendor/ folder.

Edit /js/common.js as follows:

Near line 423, find:

});

var new_option = 0;

function updateStriping(element) {


ABOVE that add:

	$('#productContainer').equalizer({

			// elements inside of the wrapper
			columns: '> .products',

			// height = type of height to use
			// "o" or "outer" = "outerHeight" - includes height + padding + border + margin
			// "i" or "inner" = "innerHeight" - includes height + padding + border
			// default        = "height"      - use just the height
			useHeight: 'height',

			// when true, heights are adjusted on window resize
			resizeable: true,

			// Minimum height applied to all columns
			min: 212,

			// Max height applied to all columns; default = 0
			max: null,

			// if browser less than this width, disable the plugin
			breakpoint: null,
			
			// class applied when browser width is less than the breakpoint value
			disabled: 'breakpoint',

			// class applied to columns that are taller than the allowable max
			overflow: 'overflowed'

	});

Force the browser to reload page resources (common.js has changed - do not want to use copy in browser cache).

We can then proceed to equalizing sub-cats on the View Category page.