• 

  threeofspades

  Participant

  April 17, 2015 at 00:23

  I would like to show 2 products (or even 3) per row when viewed on a mobile device (rather than one). Currently, I can only change the number of products per row when the screen is larger.

  Trying to find what size it is where it switches over to 1 product per row currently. I am not targeting any specific mobile device, but I imagine the iPhone sized screen is about the smallest we would be worried about.

  So basically, anytime the theme would default to 1 product per row, I want that to be 2 products per row (or 3).

  Thank you!

  #57580 Copied
  2 Answers
  

  Robert Hall

  Participant

  April 17, 2015 at 07:43

  Hello,

  If you selected Products per row 4 in Theme Options->Product Page layout you can use following code in custom.css file.

  @media (max-width: 479px){
  .products-grid.product-count-4 .product:nth-child(n) {
    width: 50%;
  }}

  if per row 3 then please add this code

  @media (max-width: 479px){
  .products-grid.product-count-3 .product:nth-child(n) {
    width: 50%;
  }}

  Regards,
  Robert Hall.

  #57611 Copied
  

  threeofspades

  Participant

  April 21, 2015 at 04:46

  Thank you for this!

  So if i select 6 products per row, and i want to show 2 products per row on mobile then would i put this?

  @media (max-width: 479px){
  .products-grid.product-count-6 .product:nth-child(n) {
  width: 50%;
  }}

  #58272 Copied
• Viewing 3 results - 1 through 3 (of 3 total)