Display Contempo Blogger Theme Sidebar on Laptop/PC Screens

We had several users asking us how to display Blogger Contempo theme sidebar on laptop/PC screen sizes, as by default, the sidebars is hidden unless the screen size is above 1440px.

Since that the new Blogger themes, which was recently released 4th week of March 2017, uses pretty much responsive CSS utilities, users can easily override theme layout by adding their own CSS, without editing each and every code inside Theme > Edit HTML.

Here's how to enable or display the sidebar on laptop or PC screens above 1024px in screen widtg but still displayed hidden on smaller screen sizes.

• Go to Theme
• Click at Customize
• At Theme Designer select Advanced
• Find Add CSS and insert below CSS markup:-

@media screen and (max-width: 1439px){
  .sidebar-invisible {
    -webkit-transform: translateX(0px)!important;
    -ms-transform: translateX(0px)!important;
    transform: translateX(0px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:10%; /* adjust % accordingly */
    margin-right:-10%; /* adjust % accordingly */
  }
}

@media screen and (max-width: 1024px){
  .sidebar-invisible {
    -webkit-transform: translateX(-284px)!important;
    -ms-transform: translateX(-284px)!important;
    transform: translateX(-284px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:auto;
    margin-auto:auto;
  }
}

@media screen and (min-width: 1440px) {
  .sidebar-container {
    margin-top: 0!important;
  }
}

• Preview your changes
• Click Apply to Blog

To check, narrow your web browser tab window accordingly & see the sidebar hidden on screen sizes lower that 1024px but emerges when screen displayed larger than 1025px.

Some quick note, the !important is used to make sure the custom codes added take precedence since that the responsive classes included by Blogger in injected later than the Theme styles.