Project Update Part 2

Responsive Web Design Fundamentals >> Lesson 4 >> Common Responsive Patterns >> Project Update Part 2

 

Here is an outline of how to approach this project update:

  1. Create NEW .css page, responsive.css. All the work of this project will be done in this file.
  2. Move the icons into a “hidden on the side” dropdown hamburger icon when screen size gets too small. When hamburger icon is clicked, move the dropdown into the screen.
  3. When the screen size gets to the right size, expand the icons back out and get ride of the hamburger icon/dropdown.
  4. As screen gets bigger to 550px, what can you do to the column flow to make the content look better? Maybe stack 2 elements within one row, like this:

    —100%—

    -50%–50%-

    —100%—

  5. Breakpoint at 850px, add margins to center content rather than continue stretching it horizontally.

    margin-left: auto;

    margin-right: auto;

  6. Reorder column flow (hero element, scores, weather)

 

 

Advertisements

Author: ajoannaproject

Studying Udacity's Full Stack Web Developer program and passing on my improvements, hints, hacks, and updates to other students via ajoannaproject.wordpress.com.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s