This topic is: not resolved
Viewing 2 reply threads
  • Author
    Posts
    • #11712
      bendhealth
      Participant

      I need to change the number of columns in the grid. I used this css:

      .mashexagonPro { width: 33% !important; }

      But now the grid does not fall into a beehive. Here is the url:

      Services

      Thanks!

      Spread the love
    • #11713
      Support Team
      Keymaster
      Post count: 782

      Can you please decrease the row? You can use wrapper row and column smaller and this can be a trick for you.

      Thanks
      Kevin JOY

      Spread the love
    • #11714
      Support Team
      Keymaster
      Post count: 782

      There is a rule for it actually in https://bendhealth.genesis-unlimited.com/wp-content/plugins/wpbakery-hexagon-masonry-gallery/assets/vc_hexagon_gallery_pro.css?ver=5.8:

      @media (max-width: 900px) and (min-width:601px) { /* <- 3-2  mashexagonProagons per row */
        #mashexagonProGrid{
          padding-bottom: 7.4%;
          font-size: 14px;
        }
        .mashexagonPro {
          width: 33.333%; /* = 100 / 3 */
        }
        .mashexagonPro:nth-child(5n+4){ /* first mashexagonProagon of even rows */
          margin-left:16.666%;  /* = width of .mashexagonPro / 2  to indent even rows */
        }
      }

      You need to change screen size for it like this:

      @media (min-width:1201px) { /* = 100 / 3 */
        #mashexagonProGrid{
          padding-bottom: 7.4%;
          font-size: 14px;
        }
        .mashexagonPro {
          width: 33.333%; /* = 100 / 3 */
        }
        .mashexagonPro:nth-child(5n+4){ /* first mashexagonProagon of even rows */
          margin-left:16.666%;  /* = width of .mashexagonPro / 2  to indent even rows */
        }
      }

      I hope this works for you.

      Spread the love
Viewing 2 reply threads
  • You must be logged in to reply to this topic.