HTML5 Data Bindings Browser Properties Manual

Advanced: Show or Hide Specific Elements on Your Page

In this tutorial we will show you how to show or hide specific elements on your page, depending on visitor's browser viewport size.
*You can also check out the video.

How to do it

1. We've created a simple page layout. The page contains a big container with a welcome message. We would like to hide this container on smaller viewport sizes. We select the container in the properties inspector floating panel (1) and select viewport width binding under browser properties (2).

2. Open the "bind to" menu, select data hide (1) and bind it (2).

3. While the container is still selected (1), click the Format Data Binding button (2). Note that you need to have HTML5 Data Bindings Formatter extension installed in Dreamweaver.

4. Now we need to add a condition, when the container should be hidden. We don't want to show the container on viewport width smaller than 800 pixels. Enter < 800 in the format field (1) and click the OK button in order to apply the condition (2).

5. Now we can preview the results. Change between different devices available in Dreamweaver Live View. You can see that the big welcome container is only visible on big viewport sizes, and on smaller ones it is hidden.

As seen on a screen larger than 800px

As seen on a screen smaller than 800px