Responsive blocks

In this Help page we will show you how to split a spreadsheet into responsive blocks that wrap nicely on all screens. 

If you are new to responsive design, you may first want to read the introduction to responsive design.

Before you create your first responsive spreadsheet, we suggest you read our best practices for responsive blocks to avoid the most common mistakes.

Define the responsive blocks

This part of the tutorial shows you how to define the responsive blocks in your spreadsheet.

Step 1

Go to the Widgets section of the task pane and look for Responsive Design.


Click on Add/Edit Responsive Blocks.

Step 2

Click on the Add new button.



Step 3

This opens the widget properties panel, in which you select the cell range for the first block. Click on Select Range, then drag the cursor diagonally across a rectangular cell range.




Step 4

Give the block a name that makes it easy to understand its function in the spreadsheet, and its contents.


Step 5

Specify how much of the screen width to use for the block. Use the separate settings for smartphone and tablet.

In the below screenshot, the block will use 100% of a smartphone screen but only 50% on a tablet. This gives room for additional blocks to the right if they use 50% or less of the screen width.



Preview your block definitions

This part of the tutorial shows you a preview of how the screen will be used on a smartphone and tablet.

Step 6

Click the Add button. An orange dotted line appears in your spreadsheet to visualize the responsive block. At the bottom of the visualizer you see the name of the block. Please do not directly edit the visualizer graphic.



Step 7

The Preview section shows you how the blocks you have created will appear on smartphone screens. Since the width was set to 100%, each block fills the screen and only one block at a time is shown.



If you want to preview your blocks in the tablet screens, press Switch to Tablet. Since each block only requires 50% of the screen, they fit beside each other.




Continue defining responsive blocks until all active cells in the spreadsheet belong to a responsive block.

Convert your spreadsheet

Step 8

Press Convert in the SpreadsheetConverter ribbon to convert the spreadsheet for the selected target environment.

Screenshots of the spreadsheet in Excel and on a smartphone



You don’t need a tablet or smartphone to verify your responsive design. The layout is responsive already on your laptop and will automatically adapt to any change to the size of your browser window. Just resize the browser window and you will see how the responsive blocks automatically reposition themselves for the new window width.

To verify the results in your smartphone or tablet, use Instant Testing.

Test an example of responsive design in your mobile device

Learn how to edit or delete responsive blocks

Before you create your first responsive spreadsheet, we suggest you read our best practices for responsive blocks to avoid the most common mistakes.