How to create grid layout in archive

Home Forums Mustang How to create grid layout in archive

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18158

    kuper
    Participant

    How to create grid layout in archive

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    How to create grid layout in archive, like at wm-post layout?

    #18159

    Oliver Juhas
    Keymaster

    Hi kuper,

    This is not possible out of the box in the theme. You need to use a custom code to achieve such layout. Here is some custom CSS you can start with:

    .archive .list-articles {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      margin: -1em;
    }
    
    .archive .list-articles article,
    .archive .list-articles article:first-child {
      margin: 1em;
      width: calc(100% - 2em);
    }
    
    @media only screen and (min-width: 640px) {
      .archive .list-articles article,
      .archive .list-articles article:first-child {
        width: calc(50% - 2em);
      }
    }
    
    @media only screen and (min-width: 1280px) {
      .archive .list-articles article,
      .archive .list-articles article:first-child {
        width: calc(33.33% - 2em);
      }
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #18163

    kuper
    Participant

    thanks Oliver Juhas your css work :x

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

You must be logged in to reply to this topic.