Styling Your Resume

  1. Duplicate your resume project files. Name the project folder resume-responsive
  2. Download the stripped down css from this gist and replace the css of your current css file.
  3. Download the normalize.css file and save it in the css directory. Make sure to add the link to this file in the head before you call style.css file. (Not necessary if you use html5bp)
<!-- CSS Stylesheet -->
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
  1. Visit the Google Fonts API, select a font and follow the instructions for implementing.
  2. Add the font declaration to the body rule in your style.css file.
  3. Add the viewport meta tag to the head of the document to control initial scaling on mobile devices (Not necessary if you use html5bp)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. Add a rule to your css to add support for fluid images. We’ll revisit the idea of responsive images in the future but this will meet our needs for the time being.
 /*Fluid Images*/
img,
object {
     max-width: 100%;
}
  1. Working from the outside in we are going to style the basic elements of the page. Focus not so much on layout as you do on readability, color scheme, line height, typography, etc.. When you are done you should have something that looks great on a small screen. You might find it helpful to set a max-width declaration on your #wrapper element. This is called a design-time style and we’ll remove it before we begin styling our full screen views.

You can view the finished product here.