[Skip to main content](#vessel-content)

#   Two columns mobile view

##

- **[KEKO512](/forum/user/58505-keko512 "View KEKO512's Profile")**
- [![KEKO512's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/58505-keko512 "View KEKO512's Profile") Topic Author
- [ Offline](/forum/user/58505-keko512)

Less More

- Posts: 9
- Thank you received: 0
-
-

4 months 2 weeks ago [\#372285](#372285) by [KEKO512](/forum/user/58505-keko512 "View KEKO512's Profile")  *[Two columns mobile view](/forum/26-product-category-display/910604-two-columns-mobile-view#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&#95;products&#95;listing .hikashop&#95;product { width: 49%;} } ---  I hope you can help me. Best regards.")* was created by *[KEKO512](/forum/user/58505-keko512 "View KEKO512's Profile")*

-- 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA2MDQtdHdvLWNvbHVtbnMtbW9iaWxlLXZpZXc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86359
- Thank you received: 14293
-
-

4 months 2 weeks ago [\#372289](#372289) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Two columns mobile view](/forum/26-product-category-display/910604-two-columns-mobile-view#372289 "-- 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&#95;products&#95;listing .hikashop&#95;product { width: 49%;} } ---  I hope you can help me. Best regards.")*

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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA2MDQtdHdvLWNvbHVtbnMtbW9iaWxlLXZpZXc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install &amp; Update Product &amp; Category Display Content Creation Sales and Orders Orders management Reports &amp; Statistics Customers Checkout Payment Methods Shipping Methods Import &amp; Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel &amp; Slider Mass Actions Filters &amp; Search Discount &amp; Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.045 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)
