Query Loop Columns on Mobile

Hi @nic,

Thanks for reaching out! By default, the Query Loop stacks to a single column on screens below 782px to keep the content readable on smaller devices.

If you’d like to show two columns on mobile, you can add this custom CSS snippet via Appearance > Editor > Styles > Additional CSS (or a child theme):

@media only screen and (max-width: 781px) {
  .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

If you only want this on a specific page, you can add a custom CSS class to the Query Loop block (under Advanced > Additional CSS class(es)), for example mobile-two-cols, and then target it like this:

@media only screen and (max-width: 781px) {
  .mobile-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Let me know if that helps!