Responsive Editing with Stackable Blocks

Stackable comes with built-in responsive editing options, also known as responsive settings. Stackable blocks can be edited in Desktop, Tablet and Mobile view for a great user experience across different devices.

You can enter responsive editing with Stackable in two ways:

1. Responsive Toggle Icons
2. Preview mode

Responsive Toggle Icons

Stackable’s Responsive Toggle Icons are icons that allow you to switch between the different device previews while editing.

When you see a Responsive Toggle Icon next to a layout or design setting in the Stackable Inspector, that means you have the option for responsive editing.

Click on the Responsive Toggle Icon and you will see the responsive editing options for Desktop, Mobile or Tablet.

Preview mode

You can also switch between the different device previews using the Preview button in the top toolbar of the Wordpress Block Editor.

In Preview mode, you can switch between Desktop, Tablet and Mobile to edit and preview your blocks across these three devices.

Desktop is the default preview for editing, but you can select Tablet or Mobile to change the responsive settings of your Stackable blocks as you would want it to appear on a tablet or mobile device.

Responsive Editing with Columns

You can use Stackable’s responsive settings to adjust your Column Widths so that it can fit tablet and mobile screens better.

You can also change the Column Arrangement of your blocks and choose the order that is more appropriate for each device. This is useful, for example, if you wanted to have an image on the left in desktop, but at the top in tablet or mobile.

Responsive Editing with Image Blocks

You can adjust the Width and Height of an image in tablet or mobile view. You can also enable Lightbox for images in responsive editing mode.

Responsive Editing with Typography

With Stackable’s responsive settings, you can adjust the Text Size and Line Height for improved readability in tablet and mobile devices. Just look for the Responsive Toggle Icons next to these settings in the Typography panel of the Heading or Text blocks.

They can also be found in other blocks that contain a text or digit element.

Hide / Show

In the Advanced tab of the Inspector, you will find a Responsive panel with options to Hide or Show specific blocks on Desktop, Tablet or Mobile. You can use this feature to show or hide entire block sections or nested blocks.

In the example below, Hide on Mobile was applied to the Text block.

Changing Responsive Breakpoints

Stackable allows you to change your responsive breakpoints to match the breakpoints provided by your theme so that when your theme's design switches to a more compact tablet or mobile design, your blocks would switch at the same time.

There's more!

Stackable’s responsive settings are available on other layout and design options as well. The above examples are just some of the basic ways you can begin responsive editing with Stackable so you can start creating websites that look good on all devices! 🤩