How to Use Responsive Breakpoints

Responsive Breakpoints

Stackable blocks can be styled differently for tablet and mobile screens, and Stackable columns can also be collapsed depending on whether they're being viewed in tablet or mobile screens.

The points where the screen is designated to be tablet or mobile are called Responsive Breakpoints.

By default, these are the breakpoints that Stackable uses:

• Tablet: 1024px
• Mobile: 768px

Stackable allows you to change these values.

When to Change Responsive Breakpoints

You may want to change these breakpoints to match the breakpoints provided by your theme, so that when your theme's design (e.g. header or menus) switches to a more compact tablet or mobile design, your blocks would switch at the same time.

Changing Responsive Breakpoints

Go to Settings > Stackable and scroll down to Responsive Breakpoints and enter new values in pixels.