sidebar-board.html

<style>
body.mobile .posts .post_info .post_vote {
 display: inline-block;
}

@media only screen and (max-width: 767px) {
  body.mobile .posts .post_vote .vote_up,
  body.mobile .posts .post_vote .vote_down {
      display: inline-block;
  }
}

#mobile-search-box {
  width: 90%;
  margin-top: 8px;
  box-sizing: border-box;
  margin-left: 5%;
}

div#content {
  width: 100%;
  margin: 0;
  padding: 0;
}

div#content > div {
 float: left;
}

div#sidebar {
  padding: 15px;
  background-color: #fff;
  width: 265px;
}

/* 4 posts */  
div#sidebar + div {
  width: 1253px;
  margin: 20px;
}

/* 3 posts */
@media only screen and (max-width: 1603px) {
  div#sidebar + div {
    /* 302px (width of one post) * 3 (number of posts) + 15px(padding per gap) * 2 (number of posts - 1) */
    width: 936px;
  }
}


/* 2 posts, sidebar */
@media only screen and (max-width: 1286px) {
  div#sidebar + div {
    /* 302px (width of one post) * 2 (number of posts) + 15px(padding per gap) * 1 (number of posts - 1) */
    width: 619px;
  }
}

/* 1 posts, sidebar */
@media only screen and (max-width: 968px) {  
  div#sidebar + div {
    /* 302px (width of one post) * 2 (number of posts) + 15px(padding per gap) * 1 (number of posts - 1) */
    width: 302px;
  }
}

@media only screen and (max-width: 808px) {
  div#sidebar {
  	display: none;
  }
  
  div#sidebar + div {
    width: 100%;
  }
}


div#sidebar ul.posts_mini .post_title {
  font-size: 1.2em;
}

div#sidebar ul.activity.activity_mini {
}

div#sidebar ul.activity.activity_mini > li {
  clear: both;
  margin-bottom: 15px;
  padding-left: 40px;
}

div#sidebar h2 {
  font-size: 18px;
}

div#sidebar a.member_photo {
  display: block;
  width: 35px;
  height: 35px;
  float: left;
  margin-right: 5px;
  background-size: 35px 35px;
  margin-left: -40px;
}

div#sidebar .activity_date,
div#sidebar .activity_date a {
  color: #aaa;
}

div#sidebar .comments_wrapper,
div#sidebar .preview, 
div#sidebar .activity_vote,
div#sidebar .sep {
  display: none;
}
</style>

<div id="sidebar">
  <div class="widget fg widget_activity">
    <h2>
      <script type="x-engine/func" data-func="lang" data-key="New Dessert Post"></script>
    </h2>
    <script type="x-engine/func" data-func="feed-mini" data-type="new" data-category-id="4894" data-items="1"></script>
  </div>
  
  <div class="widget fg widget_activity">
    <h2>
      <script type="x-engine/func" data-func="lang" data-key="Recent Activity"></script>
    </h2>
    <script type="x-engine/func" data-func="activity-mini" data-items-per-page="5"></script>
  </div>
  
  <div class="widget fg widget_members_online">
    <h2>
      <script type="x-engine/func" data-func="lang" data-key="Online Now"></script>
    </h2>
    <script type="x-engine/func" data-func="members-online" data-items="20"></script>
  </div>
</div>