Jive Factory: Final Touches & Limiting Flexible Content

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Improving Upcoming Shows on Mobile, Constraining the Design at Certain Breakpoints, Centering the Design at Certain Screen Sizes

Exercise Preview

Exercise Overview

In the previous exercises you began styling the Jive Factory page for various screen sizes. To save you many busy work, we have almost completed the Jive Factory page, adding HTML content and styling most of it. There are a few remaining things that we’d like to show you how to address. In this exercise you’ll better optimize some of the content for specific screen sizes. You’ll also give the page a centered look by setting some limits on how wide the content can get.

Improving Upcoming Shows on Mobile

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 see the new content and how it adapts to different screen sizes.
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 open 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 small screen size, the Upcoming Shows has some reflow issues. The Tickets button and Featuring text flow under the photo, but our design calls for it to be aligned as a column under the band name and event detail text. We’ve already wrapped all that text (and Tickets button) in a div with an info class. Let’s style it now.
9. Keep the page open in Chrome, with the DevTools open.
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, find 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. Awesome, now the text for each show will form into a column, instead of wrapping under the photo!

    Why does this work? In this case nothing is actually being hidden, but invoking the overflow property has forced the page to re-evaluate how content is overflowing. Overflow hidden is restricting the content to the natural width of the info div.

17. The Featuring text (below the tickets button) is probably more info than people need on such a small device. Let’s hide it on mobile. 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 looks better now that the description has been hidden.

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

Fixing the Slideshow’s Bottom Border

1. Still in Chrome, resize the browser window, and notice that the slideshow’s bottom border appears and disappears as you resize.

   The resizing of the div and the image aren’t quite “jiving” together. The image is sometimes one pixel bigger than the container div, therefore covering the bottom border at some sizes.

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: We’re using the same technique here as we do on a container of floated elements (to prevent the div from collapsing). It makes the div look at what’s overflowing, and it will expand to show the overflowing content.

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

7. Resize the window to see that the slideshow’s bottom border is always visible.

Setting a Maximum Width for the Page’s Content

The current layout works fine up to a certain point. Around 1300px the content stretches too much and the layout starts degrading. The content doesn’t need to be that wide, so we’re going to limit it.

The body tag is a natural wrapper/container for our content. We’re going to style that, so we don’t need to add another wrapper div.

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 auto margin will center the content. When we first started this page, we added padding to the body tag instead of margin. Now you can see why. We can’t use margin to add space around the page when margins are being used to center the content. No problem though, the padding worked just fine!

3. Save the file and reload your browser.
4. If your screen is big enough, make your browser wider than 1280px to see that the content stops resizing and becomes centered.

5. Resize the browser to the widest possible tablet size (green border) and keep it open.

Limiting the Content’s Width at Specific Screen Sizes

Let’s put in some more limits at various device sizes. That way we’ll have a bit more space around the outside of the page. The layout currently works fine, so this is purely an aesthetic choice (and a cool thing to know how to do).

At tablet size and smaller, the header is the full width of the page, but the rest of the content is not. We’ll limit the width of everything but the header, so we’ll need to wrap a div around everything except the header.

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 constrained to a smaller size, but is not centered. Regardless of the screen size, we’ll always want .content-wrapper centered, so we’ll add a new rule outside of the media queries.
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 see the content should now be centered (at a wide tablet size).

15. Let’s do one more screen size (phablets). 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.

    It’s looking very good, except on tablet it would be nice if the header’s content would align with other page content below it. This will be the last constraint we want to add. The header needs to be the full width of the browser, so we can’t wrap the .content-wrapper around the header. We’ll need to wrap only its contents.

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 admire the beautiful results of your work.

Cleaning up the Code

To ease our development we added colored top borders to indicate which media query we were seeing. Let’s get rid of those now that we are finished with the page.

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 enjoy the finished layout!