Introduction
BuddyBoss doesn’t include a native option to stretch your site’s container past its default maximum width. By adding a few lines of custom CSS, you can expand the layout up to 1800 px (or any limit you choose) and ensure content, sidebars, and media scale properly on ultra-wide screens.
Custom Workaround
- Go to BuddyBoss > Theme Options.
- Under Custom Codes, Enable CSS.
Append the following CSS:
/* START of WIDE-SCREEN STYLING */
@media screen and (min-width:1201px) {
.container {
max-width: 1800px; /* stretch limit */
}
#primary {
max-width: 100% !important;
flex: 3 0 250px;
}
.widget-area:not(.widget-area-secondary) {
flex: 1 0 180px;
max-width: 550px; /* stretch limit */
min-width: 280px; /* shrink limit */
}
/* Forum content */
.activity-list li.bbp_reply_create .activity-inner,
.activity-list li.bbp_topic_create .activity-inner,
.activity-list li.blogs .activity-inner {
max-width: 100%;
}
/* Forum images */
.bb-media-length-1 .entry-img img {
min-width: 100%;
}
.activity-list li.bbp_reply_create .bb-activity-media-wrap,
.activity-list li.bbp_topic_create .bb-activity-media-wrap {
padding: 0 10px;
}
/* Video & Docs */
.bb-activity-media-wrap,
.bb-activity-video-wrap,
.activity-list .bb-video-wrapper,
.video-activity-wrap {
max-width: initial;
}
/* Photos */
.bb-media-length-1 .media-activity {
flex: 0 0 100%;
}
}
/* END of WIDE-SCREEN STYLING */- Save Changes.
Troubleshooting and FAQs
Q: The layout didn’t expand—what should I check?
A: Clear any page-cache, CDN, and browser cache, then reload on a screen wider than 1200 px.
Q: Forum posts or media still appear constrained—why?
A: Ensure the class names match your BuddyBoss version—update selectors if your theme templates differ.
Q: Will this affect smaller screens?
A: No—the CSS is wrapped in @media screen and (min-width:1201px), so it only applies to large viewports.
