2 column products in mobile display

  • Posts: 25
  • Thank you received: 0
1 week 6 days ago #304623

Hi,

I have selected 3 products in a row for the normal desktop view. On mobile it breaks into 1 column displaying 1 product, I would like to display 2 columns for mobile view.

Have used the code from the threads below but the codes are not working for me.
www.hikashop.com/forum/product-category-...mber-of-columns.html
www.hikashop.com/forum/search.html?query...ldforums=1&catids=26

How do I achieve the display of 2 column products in mobile? Thank you.

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

  • Posts: 2074
  • Thank you received: 283
  • MODERATOR
1 week 5 days ago #304636

Hello,

To achived what you need there will be several css command to add in your frontend css file.
First have a look on this tutorial , then you have to get the required @media (media queries) to add your custom code.

For start and as example this kind of code may do the trick :

@media only screen and (max-width: 600px), (max-device-width: 600px) and (min-device-width: 600px) {
    .hikashop_column_product_container {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }
}
Where @media define on which device width the css command must be applied, and note that above it's pseudo code, you have to get the required html class by using the inspector tool to get your required html class.



Hope this will help you to achieved what you need.
Regards

Last edit: 1 week 6 days ago by Philip.

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

Time to create page: 0.055 seconds
Powered by Kunena Forum