Jive Factory: Final Touches & Limiting Flexible Content

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Optimizing upcoming shows for mobile devices, implementing strategic design constraints at key breakpoints, and centering content layouts for enhanced user experience across screen sizes

Exercise Preview

Exercise Overview

In previous exercises, you've built the foundation for styling the Jive Factory page across various screen sizes. Now we'll refine the details that separate good responsive design from exceptional user experiences. This exercise focuses on the critical final optimizations that ensure your content performs flawlessly on specific device categories while maintaining visual hierarchy and readability.

We've provided a more complete version of the Jive Factory page to accelerate your learning. Rather than focusing on repetitive markup tasks, you'll concentrate on advanced responsive techniques: fine-tuning content reflow, implementing strategic width constraints, and creating centered layouts that adapt intelligently to different viewport sizes. These skills are essential for creating professional-grade responsive websites that feel native on every device.

Improving Upcoming Shows on Mobile

Mobile optimization requires surgical precision. Small screens demand that every pixel serves a purpose, and content must flow logically without overwhelming users. Let's address common mobile layout issues and implement solutions that enhance usability.

1. We'll be using a new folder of provided files for this exercise. It contains the same Jive Factory page you've been working on in the previous exercises, but in a more completed state. Close any files you may have open in your code editor to avoid confusion.
2. In Chrome, preview index.html (from the Jive Final Touches folder). Be sure to go into the right folder!
3. Resize the browser from mobile up to desktop size to observe how the enhanced content adapts across different breakpoints. Notice areas where content feels cramped or awkwardly positioned.
4. CTRL–click (Mac) or Right–click (Windows) anywhere on the page and select Inspect to open Chrome's DevTools.
5. On the upper left of the DevTools panel, click the Toggle device toolbar button to activate the mobile emulator.
6. From the device menu above the webpage, select a mobile device such as the iPhone 5. (Make sure it's in the vertical orientation.)
7. Click the Reload button, or hit Cmd–R (Mac) or CTRL–R (Windows).
8. At this constrained screen size, the Upcoming Shows section exhibits problematic content reflow. The Tickets button and Featuring text incorrectly wrap beneath the promotional photo, disrupting the intended visual hierarchy. Our design specification calls for this content to align as a clean column beneath the band name and event details. We've already wrapped the relevant text and button elements in a div with an info class—now we'll apply the CSS to control its behavior.
9. Keep the page open in Chrome, with the DevTools open for real-time testing.
10. Switch back to your code editor.
11. For this exercise we'll be working with the Jive Final Touches folder. Open that folder in your code editor if it allows you to (like Sublime Text does).
12. Open main.css from the css folder.
13. In the max-width: 479px media query, locate the .shows h1 rule (around line 276).

14. Below the .shows h1 rule add the following:

    .shows.info {
        overflow: hidden;
    }

15. Save the file.

16. Reload the page in Chrome. The text for each show now forms a proper column instead of wrapping under the photo—a significant improvement in mobile readability.

    This technique works because the overflow: hidden property forces the browser to establish a new block formatting context. Rather than hiding content, it constrains the info div to its natural width, preventing text from flowing around floated elements. This is a fundamental responsive design technique for controlling content reflow on constrained screens.

17. The Featuring text below the tickets button provides secondary information that becomes counterproductive on small screens. Mobile users prioritize essential information—band name, date, and ticket access—over detailed descriptions. Let's streamline the mobile experience by hiding this supplementary content. Switch back to main.css in your code editor.

18. After the .shows.info rule you just added (around line 279, in the max-width: 479px media query), add the following:

    .shows.description {
       display: none;
    }

19. Save the file.
20. Reload the page in Chrome.
21. Notice that Upcoming Shows now provides a cleaner, more focused mobile experience with the description hidden. This progressive disclosure approach ensures users can quickly scan essential information without visual clutter.

22. Close the DevTools window, but keep the page open in Chrome for continued testing.

Fixing the Slideshow's Bottom Border

Visual consistency across all screen sizes requires attention to seemingly minor details. Border inconsistencies can undermine an otherwise polished design, particularly in prominent page elements like slideshows.

1. Still in Chrome, resize the browser window gradually and observe how the slideshow's bottom border appears and disappears as you resize. This inconsistent behavior occurs when the image dimensions don't perfectly match the container dimensions across all viewport sizes.

   This common issue stems from the complex relationship between responsive images and their containers. As the browser calculates new dimensions during resize, rounding differences can cause the image to extend one pixel beyond its container, effectively masking the bottom border.

2. Switch back to main.css in your code editor.
3. In the general styles find the .slideshow.module rule, around line 75.

4. Add the following code shown below in bold:

   .slideshow.module  {
      padding: 0;
      overflow: hidden;
   }

   NOTE: This employs the same block formatting context technique we used earlier. The overflow: hidden forces the container to expand and accommodate any content that might extend beyond its calculated boundaries, ensuring consistent border visibility.

5. Save the file.
6. Reload the page in Chrome.

7. Resize the window to confirm that the slideshow's bottom border remains consistently visible across all screen sizes.

Setting a Maximum Width for the Page's Content

Effective responsive design isn't just about accommodating small screens—it's equally important to optimize for large displays. Without proper constraints, content can become unwieldy on wide monitors, degrading readability and visual appeal.

Around 1300 pixels wide, our current layout begins to suffer from excessive line lengths and awkward spacing. Research in typography and user experience consistently shows that optimal reading comfort occurs with line lengths between 45-75 characters. Beyond this range, users struggle to track from line to line, particularly in multi-column layouts.

Rather than adding unnecessary markup, we'll leverage the body tag as our natural content wrapper—an elegant solution that maintains clean HTML structure.

1. Switch back to main.css.

2. Near the start of the min-width: 1024px media query (around line 396) add the following code shown in bold to the body rule:

   body {
      border-color: blue;
      max-width: 1280px;
      margin: auto;
   }

   NOTE: The margin: auto property centers the content horizontally within the viewport. This is why we initially used padding rather than margins for page spacing—margins serve the centering function, while padding provides the visual breathing room around content edges.

3. Save the file and reload your browser.
4. If your screen exceeds 1280px width, expand your browser to its maximum width to observe how the content stops expanding and becomes elegantly centered within the viewport.

5. Resize the browser to the widest possible tablet size (indicated by the green border in DevTools) and keep it open for the next section.

Limiting the Content's Width at Specific Screen Sizes

Strategic width constraints at different breakpoints can significantly enhance visual hierarchy and readability. While our current layout functions adequately, implementing thoughtful spacing creates breathing room that elevates the overall design sophistication—a hallmark of professional web development.

We'll implement a selective constraint approach: maintaining the header's full-width impact while containing body content. This technique preserves visual drama in key branding areas while optimizing readability in content-heavy sections.

1. Open index.html in your code editor.

2. Around line 49, start the .content-wrapper div as shown below in bold:

   </header>
   
   <div class="content-wrapper">
   <main role="main">

3. Around line 157, end the .content-wrapper div (with an HTML comment so we remember which tag we're ending) as shown below in bold:

   </footer>
   </div> <!—/.content-wrapper—>
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

4. Save the file.
5. Now we need to style the .content-wrapper. Switch to main.css.

6. At the start of the (min-width: 740px) and (max-width: 1023px) media query (around line 385), add the following new rule:

   .content-wrapper {
      max-width: 800px;
   }

7. Save the file.
8. Reload the page in your browser.
9. Notice the content is being appropriately constrained but appears left-aligned rather than centered. Since centering is a consistent requirement across all screen sizes, we'll define this behavior outside the media queries for more maintainable code.
10. Switch back to main.css.
11. In the general styles, around line 251 find the .module rule.

12. Above the .module rule add:

    .content-wrapper {
       margin: auto;
    }

13. Save the file.
14. Reload your browser to confirm the content is now properly centered within the tablet viewport.

15. Let's optimize the phablet experience as well. At the start of the (min-width: 480px) and (max-width: 739px) media query (around line 333) add the following code shown in bold:

    .content-wrapper {
       max-width: 600px;
    }

16. Save the file.

17. Reload the page in your browser and resize from mobile to desktop to observe the smooth content transitions across all breakpoints.

    The layout now demonstrates professional-grade responsive behavior, but there's one refinement opportunity. On tablet sizes, aligning the header's internal content with the body content below would create a more cohesive visual flow. Since the header requires full-width background treatment, we'll wrap only its internal contents rather than the entire header element.

18. Switch to index.html in your code editor.

19. Around line 13, start the .content-wrapper div as shown below in bold:

    <header class="module clearfix">
       <div class="content-wrapper">
       <div class="company-info">

20. Around line 48, end the .content-wrapper div (with an HTML comment so we remember which tag we're ending) as shown below in bold:

    </nav>
       </div> <!—/.content-wrapper—>
    </header>

21. Save the file.
22. Reload the page in your browser.

23. Resize from mobile to desktop and observe the refined alignment between header content and body sections—a subtle but important improvement in visual cohesion.

Cleaning up the Code

Professional development practices include removing development aids before deployment. The colored borders we used for breakpoint identification served their purpose during development but should be eliminated for production-ready code.

1. Switch back to main.css in your code editor.
2. Find the body rule in the general styles (around line 21).
3. Delete the border-top line of code.
4. Delete the body rule in the min-width: 480px media query (around line 291).
5. Delete the body rule in the min-width: 740px media query (around line 341).
6. Remove border-color from the body rule in the min-width: 1024px media query (around line 397).
7. Save the file.
8. Reload the page in your browser to experience the polished, production-ready responsive layout you've created!