Adding Media Queries for Pickup Soccer - Exercise

Contact Us or call 1-877-932-8228
Adding Media Queries for Pickup Soccer - Exercise

Adding Media Queries for Pickup Soccer

Duration: 20 to 30 minutes.

Let's use media queries to fix a few things on the Pickup Soccer site. The top (white) nav has never worked well once the browser window is resized too small (it slides under the logo when the container runs out of room to float it right). Let's change the top nav as such:

soccer top nav

Also, the game listings get a bit difficult to read when the browser gets too narrow. Let's change this to move the titles under the images when the browser gets narrow:

soccer games titles under images

  1. Open MediaQueries/Exercises/topnavandtitles/css/style.css in your file editor.
  2. Add a viewport tag to index.html.
  3. Update CSS to unfloat the top nav at widths below 600px.
  4. Update CSS so that, at browser-window widths below 960px, the titles for the game listing fall below (instead of to the right of) the thumbnail photos.



Code Explanation

We use media queries to effect these changes. A query targeting a max-width of 600 pixels unfloats the top nav and adds borders. Another set of queries, targeting a browser width of 960 pixels, unfloats the .game images and modifies the h3 titles' size.

Also, notice that we added an extra CSS rule to clear every other floated .game element:

#maincontent .game:nth-of-type(odd) {

Because each game element has a different height, we might find that the single, last item is pushed right - instead of, as we would expect, aligning left as the bottom-most element - because the item above it is too tall. We use nth-of-type(odd) to clear the floating for each odd element; for CSS nth-of-type, the first element has index 1.