Remove 3rd column for lower resolution screens

Ok so here is a solution for removing 1 column (from a 3 column site) when on a lower resolution screen like an ipad. as you can see we made the left widget sidebar larger, and the content larger, and removed the right sidebar. thanks TOM for your help on this, I spent hours trying to figure it out!

@media screen and (max-width: 1100px) {
      #right-sidebar {
            display: none;
      }
      .content-area.grid-65 {
            width: 76%;
    padding-left:25px;
      }
.pull-65 {
  left: -76%;
}
.widget-area.grid-20 {
    width: 22%;
}

}