product layouts break after Hikashop v. 6.1

Hi,

Good news: this is not a HikaShop bug, and the fix is a small one on the template side, not in the product views.

What happened is a CSS change between versions. Up to 6.1 the product grid was built with floats, so the row wrapper did not need any particular display mode. From 6.2 onward the grid uses CSS Grid: the row wrapper (.hk-row-fluid) has to be display:grid for the product columns (.hkc-md-4 on the listing, .hkc-md-8 / .hkc-md-4 on the product page) to sit side by side. HikaShop also forces those columns to float:none on purpose under the new grid, so there is no float fallback once the wrapper stops being a grid.

Your template (rt_xenon) contains this custom rule:

.hk-row-fluid { display: block; }

.hk-row-fluid { display: grid !important; }

Hi,

Glad the product list is sorted. The Details section is the same kind of issue, one level deeper.

The field rows in that section already carry HikaShop's grid class hkc-md-6, which means "half width" (6 of 12 columns), so they are meant to sit two per row. The reason they do not is that their container, the div with the class hikashop_product_custom_info_main_table, is a plain block. HikaShop's half-width columns only line up when their container is a CSS grid, so as long as the container stays a block the rows just stack and float next to each other at their natural width.

This is also why your own attempt did not change anything: setting display: grid on its own gives a grid with a single column, so everything still ends up stacked. The piece that was missing is grid-template-columns, which tells the grid it has 12 columns for the hkc-md-6 rows to span 6 each. And float has no effect on a grid item, so adding or removing it makes no difference here.

The fix is to make that container a 12 column grid. Add this to the same custom CSS where you removed the .hk-row-fluid display:block rule:

.hikashop_product_custom_info_main_table {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.hikashop_product_custom_info_main_table {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 20px;
}

Hi,

Same idea as before:

The details block and the shipping & returns block are already set up as grid columns: details carries hkc-md-8 (8 of 12) and shipping & returns carries hkc-md-4 (4 of 12), so together they fill one row. They stack because their shared container, the div with the class hikashop_product_bottom_part, is a plain block, not a grid. That is also why putting the grid on hikashop_product_custom_info_main_table did not help: that is the details table itself, not the container that holds the two columns.

The catch is that this container also holds other full-width blocks (the description, the related items, the comments). So you make it a 12-column grid and tell those blocks to span the whole width, which leaves the details and shipping columns sharing one row:

.hikashop_product_bottom_part {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: start;
}
.hikashop_product_bottom_part > .hikashop_product_description_main,
.hikashop_product_bottom_part > span.hikashop_product_url_main,
.hikashop_product_bottom_part > .hikashop_submodules,
.hikashop_product_bottom_part > .hikashop_external_comments {
	grid-column: 1 / -1;
}