how to get related products in two columns on mobiles & 4 columns on dekstops?

Comments

• Albert

  December 2016

  Hi,
  
  to display 4 related products on desktop and 2 on mobile, you need to use the following css:

  @media only screen and (min-width: 1240px) {
      .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
          width: 23% !important; 
      }
      .woocommerce ul.products li.product:nth-child(4n+1) {
          clear: both;
      }
  }
  
  @media only screen and (max-width: 767px) {
      .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
          width: 47% !important; 
      }
      .woocommerce ul.products li.product:nth-child(2n+1) {
          clear: both;
      }
  }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DeadWire3

  December 2016 edited December 2016

  hi, thanks for the code, the second set of code worked and the mobiles now display the related products in 2 columns, but the first set of code gave me this:
• Albert

  December 2016

  Please put this code onto your site because we do not see it anywhere at this moment.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DeadWire3

  December 2016

  okay, i have put the code on to the backend. please check ASAP! 
• Albert

  January 2017

  Sorry but we still do not see it anywhere.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DeadWire3

  January 2017 edited January 2017

  Sorry I had removed the code since it was on a live site and i had not gotten a response in two days, i have put the code back again on a cloned site: https://woocommerce-31034-69132-197811.cloudwaysapps.com/shop/strength/athos/seated-leg-curl-at-7090/   please check in this link now. sorry for the inceoncinece. 
• Albert

  January 2017

  Last 2 days it was a weekend and a new year and that's why we all were off.
  
  Anyway, to avoid unwanted behave, please replace the 1st declaration we gave you above with with the following css:

  @media only screen and (min-width: 1240px) {
      .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product { 
          width: 23% !important; 
      }
      .woocommerce ul.products li.product:nth-child(4n+1) {
          clear: both;
      }
      .woocommerce ul.products li.product:nth-child(3n+1) {
          clear: none !important;
      }
  }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next