Flix: Creating a Scrollable Area

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Creating a Horizontal Scrollable Area, Optimizing the Scrolling Experience for iOS Touch Devices

Exercise Preview

Photos courtesy of istockphoto, unizyne, Image #19302441, Marcello Bortolino, Image #17472015, Sergey Kashkin, Image #318828, Sveta Demidoff, Image #2712135.

Exercise Overview

In this exercise, you'll master the art of creating smooth horizontal scrollable sections—a crucial skill in modern web design. Horizontal scrolling has become increasingly popular in 2026, particularly for content carousels, product galleries, and media lists. You'll not only learn the core CSS techniques but also implement the native iOS scroll bounce effect that users have come to expect from professional web applications.

This technique is essential for creating app-like experiences on the web, especially as mobile-first design continues to dominate the industry.

Styling the Horizontal Scroll Area

1. We'll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion and ensure a clean workspace.

2. In a desktop browser, preview index.html from the Flix Scrollable Area folder in Class Files > yourname-Mobile and Responsive Class.

   Notice the movie posters are currently stacked vertically in the default block layout. Our design calls for a horizontal scrollable interface—a pattern you'll see across major platforms like Netflix, Disney+, and Apple TV+. On smaller devices, users should be able to scroll horizontally when all movie posters don't fit within the viewport. Let's transform this vertical stack into an elegant horizontal scroll experience.

3. On the Desktop, navigate to the Flix Scrollable Area folder.
4. Go into the css folder and open main.css in a code editor.
5. The movie posters are contained within an unordered list that has a movies class applied to it. On line 83, locate the .movies li rule. This selector targets the individual list items in our movies container and currently defines their dimensions and spacing.

6. Add the following code to transform the vertical stack into a horizontal row:

   .movies li {
       display: inline-block;
       width: 99px;
       margin-right: 11px;
   }

   The display: inline-block property is crucial here—it allows the list items to sit side by side while maintaining their block-level properties for consistent sizing.

7. Save the file and observe the immediate transformation.
8. Preview index.html in a browser. The posters now align horizontally, but there's a critical issue: when you narrow the browser window, the movie posters wrap to multiple lines. This breaks our intended user experience, as mobile users should scroll horizontally rather than see content wrap.
9. Switch back to main.css in your code editor to address this wrapping behavior.

10. Directly above the .movies li rule, find the .movies rule (line 78). This targets our movies container. Add the following code:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
    }

    The white-space: nowrap property prevents the inline-block elements from wrapping to new lines, maintaining our horizontal layout regardless of container width.

11. Save the file and test the improvement.

12. Preview index.html in a browser and perform the following tests:

    • Narrow the browser window to confirm that movie posters no longer wrap to multiple lines.

    • However, you'll notice a new issue: when the posters extend beyond the viewport width, the entire page scrolls horizontally. This creates an awkward user experience where the header and other page elements also scroll. We need to isolate the scrolling behavior to just the posters section.

13. Return to main.css in your code editor to implement proper scroll containment.

14. Add the following property to the .movies rule:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
       overflow-x: auto;
    }

    The overflow-x: auto property creates a scrollable area along the horizontal axis only when content exceeds the container width. This is more efficient than overflow-x: scroll, which would always show scrollbars regardless of content size.

15. Save the file and test the scroll containment.
16. Preview index.html in a browser to verify that only the poster area scrolls horizontally. Desktop browsers will typically display a horizontal scrollbar, while mobile browsers hide scrollbars and rely on touch gestures for scrolling—a key difference in mobile user interface design.

17. If possible, test index.html in iOS Simulator or on an actual iOS device. In iOS Simulator, drag horizontally over the posters to simulate a swipe gesture. When you reach the end of the scrollable content, notice the abrupt stop—it lacks the characteristic "bounce" effect that iOS users expect from native applications. This subtle detail significantly impacts perceived quality and user satisfaction.

    NOTE: If you're using iOS Simulator and hear a "click" sound when releasing the mouse after dragging, this is merely a simulator artifact that won't occur on physical devices.

18. Switch back to main.css to implement native-feeling scroll physics.

19. Add the following iOS-specific property to the .movies rule:

    .movies {
       background-color: #fff;
       padding: 15px;
       margin: 0;
       white-space: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
    }

    The -webkit-overflow-scrolling: touch property enables hardware-accelerated scrolling on iOS devices, providing the smooth, momentum-based scrolling with bounce effects that users expect from native apps.

20. Save the file and test the enhanced scrolling experience.

21. Return to iOS Simulator or an iOS device and reload index.html. Now when you swipe over the posters, you'll experience the native iOS bounce effect when reaching the scroll boundaries. This attention to platform-specific behavior demonstrates professional-grade web development that rivals native app experiences.

    File Organization Best Practice

    Close any open files in your code editor before starting new exercises to avoid confusion and maintain clean workspace organization.

    Before vs After CSS Changes

    Feature	Before Styling	After Styling
    Poster Layout	Stacked vertically	Single horizontal line
    Wrapping Behavior	Wraps to multiple lines	No wrapping with white-space: nowrap
    Scroll Area	Entire page scrolls	Only poster section scrolls
    Mobile Experience	Standard scroll	Native iOS bounce behavior

    Recommended: The final implementation provides optimal mobile user experience with contained scrolling

    Essential CSS Properties

    display: inline-block

    Arranges list items horizontally while maintaining block-level sizing control. Critical for horizontal poster layouts.

    white-space: nowrap

    Prevents line wrapping of inline elements. Ensures posters stay on single line regardless of container width.

    overflow-X: auto

    Adds horizontal scrollbars only when needed. X-axis refers specifically to horizontal scrolling direction.

    -webkit-overflow-scrolling: touch

    Enables native iOS momentum scrolling with bounce-back effect. Essential for professional mobile experience.

    iOS Simulator Bug Notice

    If you hear a click sound when releasing the mouse after dragging in iOS Simulator, this is just a simulator bug and will not occur on actual devices.

Optional Bonus: Removing Extra Margin

Each movie poster includes 11px of right margin to create consistent spacing between items. However, this also adds unwanted space after the final poster, creating visual imbalance with the container's padding. This seemingly minor detail can impact the overall professional appearance of your scrollable interface. Fortunately, modern CSS provides an elegant solution.

1. Switch back to main.css in your code editor.
2. Locate the .movies li rule (around line 86).

3. Below the .movies li rule, add the following CSS rule:

   .movies li:last-child {
      margin-right: 0;
   }

   The :last-child pseudo-selector targets only the final list item, removing its right margin while preserving spacing between all other items. This creates consistent visual rhythm throughout the scrollable area.

4. Save the file and observe the refinement.
5. Preview index.html in a browser to see the improvement.

6. Scroll to the far right of the posters and notice that the spacing after the last poster now matches the consistent spacing between all other posters, creating a more balanced and professional appearance.