Skip to content

Responsive behavior

Handling how a layout responds to different browser widths is a core feature of Brix.

Spacing and dimensions options can be found in the Brix options page in the WordPress admin, under the Options tab.

The Container width dictates the width of the elements that contains the markup generated by Brix. Being attached to the regular content of the page, when left empty this option will make the Brix container extend as much as it can, depending on the theme layout.

The Gutter is the horizontal space between columns. Please note that it is not recommended to express the gutter value in percentage, and it’s better to rely on pixel values, since they won’t break the layout.

Insering a purely numeric value here will be automatically converted to pixels.

The Baseline represents the vertical space between rows.

Breakpoints

We call a breakpoint a particular screen width; for that screen width, a set of rules can be applied until another breakpoint takes precedence.

You can learn more about breakpoints and CSS media queries here.

By default the plugin defines two breakpoints, whose parameters can be tweaked but that cannot be deleted:

  • Tablet: targets devices whose screen width is between 1024px and 768px,
  • Mobile: targets devices with screen width under 768px

You can define a new custom breakpoint by clicking on the "Define a new breakpoint" button, and you’ll be asked to add a "Label" for it (advice: be brief yet descriptive), a "Context" (doesn’t affect the breakpoint, it’s just for categorization), the corresponding "Media query" and specific values for the "Gutter" and "Baseline" settings (see above).

The typical and most easy way to accomplish a responsive grid layout is making every column go full width under a certain screen width.

You can accomplish that automatically using the "Sections and columns go full width under this breakpoint" option, which allows you to select a specific breakpoint.

Column management

When editing a section row, clicking on the pencil icon in the upper right hand corner of the bar that pops up when going over it with your mouse will edit the row settings.

Clicking on the second icon from the left in the row editing panel, will make you edit the responsive behavior for that column. By default, columns won’t change their width when resizing down the browser width.

At some point, columns might go full width if a breakpoint was selected in the "Sections and columns go full width under this breakpoint" option, under Brix > Configuration > Global options.

Regardless, each column’s width can be redefined for each breakpoint currently defined for your installation. Simply select the breakpoint you’d like to edit, and for each column in the current row click on the big blue button that is displayed, selecting how the column should behave under that breakpoint:

  • Default: doesn’t alter its original width,
  • 1/1: the column goes full width,
  • 1/2: the column will take half the screen width,
  • Hide: hide the column from display.

Note: keep in mind that when changing the row columns layout, each responsive rule applied to the colums is canceled and must be set again for the new layout.