Some of the instructions may have relatively long body text, and now, with the addition of image or video graphics, it becomes obvious that not all our content may fit on the screen. When you try the app in landscape orientations, it's even more obvious. We need to scroll the content when it overflows the panel.

In the Unity UI, scrolling is implemented using a special scrolling panel:

1. Under Main Canvas, select UI | Scroll View and name it Content Scroll View.
2. Set its Anchor Presets to Stretch/Stretch, and Alt+click on the same to reset its position.
3. Make room for the nav bar by setting Top to 50.
4. Uncheck Horizontal (keep Vertical) scrolling.
5. Set its Source Image to none and Color to opaque white (#FFFFFFFF).

The other options can be left as the default values. But note that the Scroll Rect has a reference to its child Viewport.

When you unfold the Content Scroll View in Hierarchy, you can see it has a Content slot populated with its grandchild Content. Instead of re-creating our Content panel, we will just move it into the Viewport and rewire the scroll view.

1. Delete the Content under Viewport.
2. Drag the Content from Main Canvas into Viewport.
3. Set its Anchor Presets to Top/Stretch, and Alt+click on the same to reset it.
4. On Control Scroll View, drag the Content object onto its Content slot.

Now we can use a Content Size Fitter on the Content panel:

1. With Content panel selected, Add Component | Content Size Fitter.
2. Leave Horizontal Fit set to Unconstrained.
3. Set Vertical Fit to Preferred Size.

Shown ahead is the final scene Hierarchy after all of this:

Press Play and, when you get to a step with a lot of content, the vertical scroll bars will let you scroll through it all, as shown ahead:

Throughout this chapter we have tested our app in the Unity Editor. Hopefully, you also periodically did Build and Run to deploy it onto your mobile device, and test it there.