If you build and run your app now in the iPhone 11 Simulator, the collection view section header will look great, but if you switch to a simulator with a smaller screen, you'll see some graphic elements have been cut off. As you have seen in previous chapters, Auto Layout ensures that the UI adapts to the device's screen size and orientation. For example, the Let's Eat app logo stays in the exact center of the screen regardless of device, and the table view in the Locations screen takes up all of the available screen space even when the device is rotated.

So far, you've only used Auto Layout with single UI elements. In this section, you will add Auto Layout constraints to multiple UI elements inside the collection view section header.

You will begin by adding constraints to the container view, then proceed to add constraints to all of the other items inside it. Perform the following steps:

1. Select the container View: 

2. Click the Add New Constraints button and enter the following values:

• Top: 0
• Left: 0
• Right: 0
• Height: 90

When done, click Add 4 Constraints. This binds the top, left, and right edges of the container View to the edges of the Collection Reusable View. The height of the View is set to 90 points, which determines the position of the bottom edge.

3. Select the Label used as a subtitle: 

4. Click the Add New Constraints button and enter the following values:

• Top: 24
• Left: 8
• Right: 16
• Height: 21

When done, click Add 4 Constraints. The space between the top, left, and right edges of the Label and the corresponding edges of the container View are set to 24 points, 8 points, and 16 points respectively. Note the width of the Label is not set, allowing it to change if you run it on a simulator with a smaller or larger screen. As before, setting the height constraint determines the position of the bottom edge of the Label.

5. Select the LOCATION button:

6. Click the Add New Constraints button and enter the following values:
   

• Top: 5
• Right: 8
• Width: 96
• Height: 25

When done, click Add 4 Constraints. Since the LOCATION button is under the subtitle Label, the top constraint determines the space between the top edge of the LOCATION button and the bottom edge of the Label, not the top edge of the container View. The space between the right edge of the LOCATION button and the right edge of the container View is set to 8 points, and the width and height constraints determine the position of the LOCATION button's left and bottom edges.

7. Select the gray line View (it may be easier to do this in the document outline): 

8. Click the Add New Constraints button and enter the following values:
   

• Left: 8
• Right: 8
• Bottom: 0
• Height: 1

When done, click Add 4 Constraints. The space between the left and right edges of the View and the left and right edges of the container View are set to 8 points, and the bottom edge of the View is bound to the bottom edge of the container View. The height constraint determines the position of the top edge of the View.

9. Select the Label used as a title: 

10. Click the Add New Constraints button and enter the following values:
    

• Top: 0
• Left: 8
• Right: 8
• Height: 37

When done, click Add 4 Constraints. The top edge of the Label is bound to the bottom edge of the subtitle Label. The space between the left edge of the Label and the left edge of the container View is 8 points. The space between the right edge of the Label and the left edge of the LOCATION button is 8 points. The height constraint determines the position of the bottom edge of the Label.

You have completed adding Auto Layout constraints to all of the views in the Explore screen's collection view section header. Cool!

You may be wondering why you needed to set the position of the UI elements using the Size inspector before adding constraints. Actually, you don't have to, but, by doing that, it makes it much easier to add constraints, as the constraint values that you see when you click the Add New Constraints button are derived from the current space between the UI elements.

Working with Auto Layout can be challenging for novice developers. Take your time doing it. If it doesn't work properly, clear all of the constraints and start over. To do this, click the Resolve Auto Layout Issues button at the bottom of the screen and choose Clear Constraints:

Now that you've completed modifying the collection view section header, let's modify the exploreCell collection view cell in the next section. You'll add some UI elements to make it match the cell shown in the app tour.