Pique Theme Change grid from 3×1 to 4×1 (or 2×2)

  • Unknown's avatar
    coronadocreative · Member ·

    I have 4 child pages currently displayed in a grid that are showing as 3 on 1 row and one underneath. I can adjust the css to show 2 on a row but it shows 2 then 1 underneath and 1 underneath that.

    How can I show either 4 on a single row or 2×2 across two rows?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    coronadocreative · Member ·

    The blog is http://www.docksiderunners.co.uk/

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @coronadocreative, it looks like you are using WordPress but you are not hosted here at WordPress.com. These forum are for those hosted here at WordPress.com. For self-hosted WordPress sites such as yours using Pique, there is a dedicated support forum at WordPress.org where you can ask for help.

    The differences between WordPress.com and WordPress.org.

    I can’t see your site as it requires a log in, but working off my test site, I came up with this, which should get you started. 

    @media screen and (min-width: 768px) {
  .pique-grid-three article {
    width: calc( (100% - 80px) / 2);
  }
  .pique-grid-three article:nth-of-type(3n) {
    margin-left: 0;
  }
  .pique-grid-three article:nth-of-type(1), .pique-grid-three article:nth-of-type(3n+1) {
    clear: both;
  }
}

    With child pages on Pique Grid pages, the child pages do not take up the same amount of vertical space, it depends on the amount of content within those pages, and if they all either have, or do not have, featured images.

  • The topic ‘Pique Theme Change grid from 3×1 to 4×1 (or 2×2)’ is closed to new replies.