Responsive Behavior

ID Post Grid automatically adapts its layout across screen sizes using CSS media queries. No configuration is needed — the responsive behavior is built into the stylesheet.

Breakpoints

Screen Width	Columns	Notes
992px and above	As configured (1–4)	Desktop layout
576px – 991px	2	Tablet — forces 2 columns regardless of setting
575px and below	1	Mobile — single column stack

Horizontal Template

The Horizontal template has its own responsive behavior. On screens below 767px, the side-by-side layout (image left, content right) stacks vertically into a single-column card format.

Controls

The search input and filter buttons wrap naturally on smaller screens. On mobile, the search input spans the full width and filter buttons wrap into multiple rows if needed.

Featured Post

The featured post always spans the full grid width. On mobile, images and content stack vertically.

Overriding Breakpoints

If you need different responsive behavior, override the media queries in your theme’s CSS. The grid uses a CSS custom property --id-pg-columns set via inline style, which the media queries override:

/* Example: force 3 columns on tablets */
@media (max-width: 991px) {
  .id-post-grid {
    --id-pg-columns: 3 !important;
  }
}