Product List Grid Layout - 2 Product Columns

Hello

does anyone know how I can set the minimum number of columns on the product list to 2 for mobile devices?

At the moment it automatically goes to one product column but I'd like two side by side.

Here's how it looks currently:

[attachment=13200:Screenshot_20180426-135845.jpg]

Screenshot_20180426-135845.jpg

How many columns do you have in desktop?

How many columns do you have in desktop?

Currently 3 columns on desktop.

Try to add the following code to the CSS section of the Theme editor

@media screen and (max-width: 480px) {
  .ty-column3 {
    width: 50%;
  }
}

http://prntscr.com/jafa8a

Great, this works. Thanks alot!

Its standart settings in http://joxi.ru/MAjb0Kef4W8dpA

The question was about mobile view. Out of the box it uses 1 column on mobile devices regardless of the settings

The question was about mobile view. Out of the box it uses 1 column on mobile devices regardless of the settings

I tried to paste that code on my CSS theme editor section but it did not worked?

I tried to paste that code on my CSS theme editor section but it did not worked?

How many columns do you have in desktop?

How many columns do you have in desktop?

I have 3 columns on Grid view on desktop, I am using unitheme

For unitheme please try

@media screen and (max-width: 480px) {
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
  }
}

For unitheme please try

@media screen and (max-width: 480px) {
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
  }
}

Thanks Ecom it worked great, however I have concern. The Add to cart button and Buy now with 1 click button is not being adjusted, so Is there a way to hide them on mobile Grid?

Please try

@media screen and (max-width: 480px) {  
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
    .ty-grid-list__control {
        display: none !important;
    }
  }
}

Please try

@media screen and (max-width: 480px) {  
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
    .ty-grid-list__control {
        display: none !important;
    }
  }
}

Dear Ecomlabs, I am really thankful to you for this solution, however, I just noticed that since I applied this css, I am facing a problem in product hover on mobile, when I hover a product, it pushes down other products. Please see here http://prntscr.com/k2ce9w

Please share or PM me your website

Please share or PM me your website

Dear Ecom,

I have sent you the PM please respond at your earliest :)

Dear Ecom,

I have sent you the PM please respond at your earliest :)

Thanks. Please try

@media screen and (max-width: 480px) {  
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
    .ty-grid-list__control {
        display: none !important;
    }
    .ty-grid-list__item form:hover .ty-grid-list__item-name {
        min-height: 10px !important;
    }
  } 
}

Thanks. Please try

@media screen and (max-width: 480px) {  
  .categories_grid .main-content-grid:not(.span16) .ty-column3 {
    width: 50% !important;
    .ty-grid-list__control {
        display: none !important;
    }
    .ty-grid-list__item form:hover .ty-grid-list__item-name {
        min-height: 10px !important;
    }
  } 
}

Dear Ecomlab, I have applied this solution and it is working fine for products with 1 or 2-word names however some products have long names on my site and whenever there is a long name product, the same problem appears, other products are pushed down

for reference

Please see this image

http://prntscr.com/k2tzzr

Please check PM

Please check PM

I replied to you on PM, Please check

Any clean code for 4 columns?