Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1119578

    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

    #1119762

    Hey Stephen,

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

    Best regards,
    Rikard

    #1119837

    Hi Rikard,

    Here is a link to a product category page;

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

    Best regards,
    Stephen

    #1119989

    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

    #1120115

    That’s great, thank you.

    #1120377

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.