Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Product List Grid Layout - 2 Product Columns Rate Topic   - - - - -

 
  • Jmoffat
  • Member
  • Members
  • Join Date: 15-Oct 12
  • 38 posts

Posted 26 April 2018 - 01:01 PM #1

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:

 

Attached File  Screenshot_20180426-135845.jpg   63.16KB   0 downloads



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 26 April 2018 - 01:16 PM #2

How many columns do you have in desktop?


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Jmoffat
  • Member
  • Members
  • Join Date: 15-Oct 12
  • 38 posts

Posted 26 April 2018 - 01:32 PM #3

How many columns do you have in desktop?

 

Currently 3 columns on desktop. 



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 26 April 2018 - 01:44 PM #4

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Jmoffat
  • Member
  • Members
  • Join Date: 15-Oct 12
  • 38 posts

Posted 26 April 2018 - 02:10 PM #5

Great, this works. Thanks alot!



 
  • stasok
  • Advanced Member
  • Members
  • Join Date: 12-Mar 12
  • 71 posts

Posted 26 April 2018 - 08:20 PM #6

Great, this works. Thanks alot!

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


Best cs cart theme UniTheme and YoupiTheme!
Want discount? Write me private.
Cs-cart customisation services.

 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 27 April 2018 - 06:10 AM #7

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 02 July 2018 - 01:10 PM #8

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?



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 02 July 2018 - 01:16 PM #9

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?


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 02 July 2018 - 01:18 PM #10

How many columns do you have in desktop?

 

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 03 July 2018 - 05:50 AM #11

For unitheme please try

 

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

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 03 July 2018 - 10:36 AM #12

 

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?



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 03 July 2018 - 01:24 PM #13

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;
    }
  }
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 04 July 2018 - 08:03 AM #14

 

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 04 July 2018 - 01:15 PM #15

Please share or PM me your website


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 04 July 2018 - 01:47 PM #16

Please share or PM me your website

 

Dear Ecom,

 

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 05 July 2018 - 06:08 AM #17

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;
    }
  } 
}

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 05 July 2018 - 11:08 AM #18

 

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 18348 posts

Posted 05 July 2018 - 01:12 PM #19

Please check PM


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • alijaved
  • Advanced Member
  • Members
  • Join Date: 14-Apr 18
  • 119 posts

Posted 05 July 2018 - 01:53 PM #20

Please check PM

 

I replied to you on PM, Please check