How to change the size of the first posts in the masonry layout of the Toggle Post Filter

Items can be customized with CSS. Custom CSS is for advanced users and you may have to ask your web designer to assist you.

Example: If you want to change the width of the first two posts, you can use the following CSS:1

@media screen and (min-width: 1200px) {
  #tg_filter_dpf_toggle_box_posts article:nth-child(1),
  #tg_filter_dpf_toggle_box_posts article:nth-child(2) {
    width: 49% !important;

The width of 49% means that you show two items in a row. You can experiment with that number so that these posts are as wide as possible and still fit together into a row, including their margins.

The min-width: 1200px part makes sure that this styling only affects large screens. On mobile devices each row should have only one post. Here too you can try different numbers.

Read more about @media.


  1. We assume that the post template is wrapped by an <article> element.[]