Two columns mobile view

  • Posts: 9
  • Thank you received: 0
1 week 5 days ago #372285

-- 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.

  • Posts: 85796
  • Thank you received: 14089
  • MODERATOR
1 week 5 days ago #372289

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:

@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.054 seconds
Powered by Kunena Forum