[Resolved] Remove 3rd column for lower resolution screens

[John MacKenzie]

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%;
}

}

[Tom]

Thanks for posting this!

For others, you may have to tweak the classes a bit depending on what sizes you have set for your sidebars.

Thanks again! 🙂

[Author]

Posts