Starting with the header, let's figure out what the differences are between the large and small versions in the following screenshot:

As you can see, our logo now needs more than one column. This happens because our columns are now narrower than in the larger version. Let's prepare the logo for three columns. To do this, we need to know the size of three columns in the fluid grid. Let's check them out in the 960_fluid.css file.

If you scroll to 45th line, you will see the definition of the grid_3 grid with the container_12 container:

.container_12 .grid_3,
.container_16 .grid_4
{
  width: 23%;
}

Just copy this size of the width to our mobile.css file as shown in the following code:

@media screen and (max-width:500px) {
  /* main header
  ================================ */
  .main_header .grid_1 {
    width: 23%; /* match 3 columns in fluid grid */
  }
}

As you can see, we changed the width of the grid_1 grid to that of the small version, but only for the .main_header scope. This means that for the main_header scope, from now on, one column has the width of three columns. This is how we will adapt to our layout.

Let's follow the same approach with the navigation menu, but, this time, in addition to changing the size of the columns, we need to remove the value of the class prefix and decrease the font size to 12px:

.main_header .grid_6 {
  width: 73%; /* match 9 columns in fluid grid */
  padding-left: 0; /* remove prefix */
  font-size: 12px;
}

As you can see, a prefix class in the 960.gs framework is nothing more than padding-left.

In this section, we remove the large text and decrease the font size of the title and subtitle:

/* about
================================ */
#about h2 {
  font-size: 80px;
}

#about h3 {
  font-size: 30px;
}

#about .grid_8 {
  display: none;
}

In this section, we want each image filling all the width. To do this, we need each image to have a width of 12 columns. Using the 960_fluid.css file as the reference, we can see that 12 columns in the container_12 container comprise 98 percent of the width of the containers in this version. Just copy the value to our context:

#work .grid_4 {
  width: 98%; /* match 12 columns in fluid grid */
}

In this section, we need to adapt our buttons to have the whole available width be the same as it is in the previous section. As we know, now that 12 columns represent 98 percent of width of the container, it isn't necessary to check the 960_fluid.css file again. I added a little margin at the bottom to separate the buttons:

#contact .grid_3 {
  width: 98%; /* match 12 columns in fluid grid */
  margin-bottom: 10px;
}

To finalize the small version, we need to fix the footer:

.main_footer .grid_10 {
  width: 64.666%; /* match 8 columns in fluid grid */
}

.main_footer .grid_10 span {
  display: none; /* Remove legal text */
}

.main_footer .grid_2 {
  width: 31.333%; /* match 4 columns in fluid grid */
}

Now, if you reload and resize your browser, you will see a portfolio that adapts well to small and large screens; we just need to cover the space between them. But, now that you worked on the widths of the small version, the medium one will be a piece of cake.

Starting with the header, I really recommend you use the same columns from the small version to support the widths at the beginning of this breakpoint:

@media screen and (min-width:501px) and (max-width:800px) {

  .main_header .grid_1 {
    width: 23%; /* match 3 columns in fluid grid */
  }

  .main_header .grid_6 {
    width: 73%; /* match 9 columns in fluid grid */
    padding-left: 0; /* remove prefix */
    font-size: 14px;
  }

  .main_header ul li {
    margin-left: 30px;
  }
}

As you may have noticed in the first line, we're using a media query with a range of widths 501px through to 800px:

@media screen and (min-width:501px) and (max-width:800px)

Further, we set the font size of the menu to 14px and the spaces between the menu items to 30px.

In this section, let's improve the font sizes and set the width of the large text to 12 columns:

#about h2 {
  font-size: 120px;
}

#about h3 {
  font-size: 46px;
}

#about .grid_8 {
  width: 98%; /* match 12 columns in fluid grid */
  padding-left: 0; /* remove prefix */
  padding-right: 0; /* remove suffix */
}

Moreover, we removed the prefix and suffix classes, and, as you may have noticed, the suffix class is just a padding-right.

As our layout is medium sized, let's set the columns in the work section to six in order to have two images per line:

#work .grid_4 {
  width: 48%; /* match 6 columns in fluid grid */
}

Now, set the columns for the contact section.

As we did in the previous section, we want two elements per line with a little margin at the bottom of the containers to separate them:

#contact .grid_3 {
  width: 48%; /* match 6 columns in fluid grid */
  margin-bottom: 10px;
}

Now we have enough space, so we won't hide the legal text. We just need to make a simple adjustment in the columns from grid_10 to grid_9 on the left side of the column and from grid_2 to grid_3 in the link on the right side of the column:

.main_footer .grid_10 {
  width: 73%;  /* match 9 columns in fluid grid */
}

.main_footer .grid_2 {
  width: 23%;  /* match 3 columns in fluid grid */
}

Reload your browser for the last time and that is it. You should have a portfolio running in all the screen sizes.