Skip to main content

Two columns mobile view

More
4 months 11 hours ago #372285 by KEKO512
-- HikaShop version -- : 6.4.1
-- Joomla version -- : 6.1.1
-- PHP version -- : 8.3
-- Browser(s) name and version -- : All
-- Error-message(debug-mod must be tuned on) -- : None

Good day, Hikashop team.

With the latest Hikashop updates, I've lost the two-column for mobile view.

I used this CSS code before, but it's no longer working:
---
@media only screen and (max-width: 600px) {
.hikashop_products_listing .hikashop_product {
width: 49%;}
}
---

I hope you can help me.
Best regards.

Please Log in or Create an account to join the conversation.

More
4 months 6 hours ago #372289 by nicolas
Replied by nicolas on topic Two columns mobile view
Hi,

This is not a setting you lost, it is a CSS change in HikaShop. The product listing used to be built with floats, so your width:49% rule gave you two columns. It is now a CSS grid: each product is a grid cell whose width is set automatically, and the number of columns is controlled by the grid, not by width. That is why your width:49% rule no longer does anything. On screens below 768px HikaShop shows the listing in a single column by default.

To get two columns back on mobile, replace your old rule with this one:
Code:
@media (max-width: 767.98px) { .hikashop_products_listing .hikashop_product { grid-column: span 6; } }

The grid has 12 columns, so span 6 means each product takes half the row, giving two per row. Put it in the same place as your previous CSS (your template custom CSS, or the HikaShop custom CSS file). I checked it on your site and it switches the listing to two columns as expected.

Please Log in or Create an account to join the conversation.

Time to create page: 0.112 seconds
Powered by Kunena Forum