Skip to content
Laurel edited this page Nov 10, 2025 · 1 revision

Fixed sidebar width

The sidebar in the Newspack Theme uses a percentage to set the width (35%) Because of this, it can drop below 300px wide before stacking underneath the content.

This CSS can be used to keep the sidebar always at least 300px before it stacks. This can be handy to keep the sidebar ads always visible, regardless of the screen size.

/* Content Layout */
@media only screen and (min-width: 782px) and (max-width: 1200px) {
  .archive:not(.post-type-archive-newspack_collection) #main, 
  .blog #main, 
  .page .main-content, 
  .search #main, 
  .single .main-content,
  .page-template-single-feature .entry-header {
    max-width: calc( 100% - 320px );
  }
	
  .archive #secondary, 
  .blog #secondary, 
  .page #secondary, 
  .search #secondary, 
  .single #secondary {
    width: 300px;
  }
	
  .page-template-single-wide .main-content,
  .post-template-single-wide .main-content {
    max-width: 100%;
  }
}

Clone this wiki locally