Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 17, 2019 at 2:09 pm #1119578
    online_steve

    Hi,

    I would like the number of columns to change depending on the screen size. At the moment I have Woocommerce > Settings > Products > Column count > 4. For screens between 480px and 767px it changes to a 2 column grid and for screens smaller than 479px it changes to a 1 column grid. At the moment for screen size between 768px and 989px it shows a 4 column grid but I would like this to be 3. Is this possible?

    Many thanks in advance.
    Stephen

    July 18, 2019 at 5:05 am #1119762
    Rikard

    Hey Stephen,

    Could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    July 18, 2019 at 8:28 am #1119837
    online_steve

    Hi Rikard,

    Here is a link to a product category page;

    http://staging.flyandfilmtours.com/drone-tours/view-all/

    Best regards,
    Stephen

    July 18, 2019 at 8:17 pm #1119989
    Victoria

    Hi Stephen,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) and (max-width: 989px){
  .products .product.first {
      clear: none;
  }
  div .products .product {
      margin: 0 1% 1% 0;
      width: 30.25%;
  }
  #top .products .product.last, #top #main .products .product.last {
      margin-right: 1%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 19, 2019 at 9:59 am #1120115
    online_steve

    That’s great, thank you.

    July 20, 2019 at 4:28 am #1120377
    Rikard

    Hi,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.