Advanced Search

Search Results (Searched for: 2 columns responsive)

22 Jun 2026 19:07

product layouts break after Hikashop v. 6.1

Category: Product & Category Display

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;
}

I tested this on your staging page: the shipping & returns block moves to the right of the details, and the description, related items and comments stay full width above and below. On narrow screens the two columns collapse back to stacked, which is the intended responsive behaviour.
Displaying 1 - 1 out of 1 results.
Time to create page: 0.113 seconds
Powered by Kunena Forum