[bsilverop]

Hi All,

I’m having some trouble getting my forum pages to be full width. If I use the shortcode to embed a forum and set my page template to “Full Width”, it works fine. But then if you click another forum topic it goes back to what looks like half width. I have tried copying my full-width.php (twenty fourteen) and calling it bbpress.php and forum.php, but it seems to have no impact. I have also tried adding some CSS, but also seemed to have no impact:

.bbpress-forums .col-2cl .main {
background: none repeat-y right 0;
padding-right: 0px;
}

I’m kind of at a loss as to why the forum pages are still not full width, so would appreciate any suggestions. Thanks,

[Robin W]

are you using the twentyfourteen theme?

[bsilverop]

Robin W, yes I am using twenty fourteen.

[marandaicgiyim]

i have the problem with you,am looking for a solution.

[Robin W]

my twentyfourteen theme doesn’t have a full-width.php.

Suggest you make a copy of page.php – rename it bbpress.php

then remove

get_sidebar();

near the end

and save it and let us know if that works

[bsilverop]

Thanks for the update. I have a file called full-width.php in wp-content/themes/twentyfourteen/page-templates. And I apologize, I don’t think I was clear in my original post. I want the forum to extend the width of the page beyond the content sidebar on the right side of the page. I do want the left sidebar to remain.

I modified the copy of bbpress.php taken from page.php, and I removed

<?php get_sidebar( 'content' ); ?>

I was already hiding the content sidebar on forum pages, so the result there is the same. The forum is cut short where the content sidebar on the left normally appears.

I tested the full width page template on one of my pages to make sure it extends beyond the content sidebar on the right, and it does. I am hoping to get the forum to do the same. Thanks again,

[Robin W]

can you post some links please so that we can see the problem

[bsilverop]

I created a temp user so you can see what this looks like. Here’s the link:

http://todaystechblog.com/

Log in as RobinW/RobinW and click the Forum on the left side of the page. The forums visibility are all set to Private.

Thanks for looking,

[Robin W]

sorry it didn’t like that login

[bsilverop]

Sorry for that, I re-added the user and it’s working.

[Robin W]

ok, in your theme css add this at the bottom

#bbpress-forums .content-area {
width: 150% !important;
}

My css is lousy, so if this doesn’t work, come back !

[bsilverop]

Thanks for looking in to it on the server. I added what you suggested to the CSS but it seemed to have no impact. I’ve done some other CSS customizations to increase the font size, so I removed those to eliminate the possibility that some of my other changes are preventing this from working. But modifying the width did not change the behavior. Thanks again,

[Robin W]

try just

.content-area {
width: 150% !important;
}

but that might muck up other areas of the site

[bsilverop]

It did indeed muck up other areas of the site. But I combined the two you sent and this seems to work:

#bbpress-forums {
	width: 150% !important;
}

Can you see any reason why this wouldn’t be ideal? The only thing I’ve noticed so far is that when testing on a large monitor, the footer has a lot of empty space at the bottom (only on the forum pages). Otherwise it looks to be working ok on my laptop, I’m just concerned it might not for others. Thanks again!

[Robkk]

change the width from 150% to just 100%, if you go to a smaller screen size the forums are cut-off.

use this and see if it works

@media screen and (min-width: 1008px)
.bbpress .site-content {
margin-right: 0;
margin-left: 182px;
}

[Robin W]

@robkk – I was hoping you might join in here, you css is so much better than mine !!!

[bsilverop]

Thanks for the feedback. I added the @media screen CSS suggested above, but the forum width reverts back to the way it was before. But yes, you’re right. When I go to another screen size the forum size changes.

[Robkk]

@robin-w 🙂

@bsilverop well you can try adding !important to it too, or removing the @media screen and (min-width: 1008px)

i just took it right off of inspect element.

but for sure keep the margin-right:at zero pixels because that is where your old sidebar use to be.

if all still doesnt work change .bbpress to #bbpress-forums

reply back if you havent got it yet.

[bsilverop]

Thanks, removing @media screen and (min-width: 1008px) and adding !important seems to have worked. The forum now resizes to fit the page if you go to a smaller screen size. I appreciate the help from both @robin-w and @robkk. I didn’t expect support like this, I really am grateful. Thanks again!

Solution:

1) Copy page.php and rename bbpress.php. Remove <?php get_sidebar( 'content' ); ?> as I want to extend beyond the content sidebar.

2) Add CSS:

#bbpress-forums {
	font-size: inherit !important;
	width: 100% !important;
}

.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

[Robkk]

@bsilverop

well i just checked and its almost there,

you have space on the left whenever you go to a smaller screen size so you probably need to bring back the @media statement so there is space for the left sidebar when it reaches 1008px but none when its on a smaller than 1008px.

#bbpress-forums {
	font-size: inherit !important;
	width: 100% !important;
}

@media screen and (min-width: 1008px)
.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

i think your full width forum should be done now

[bsilverop]

I didn’t notice this before, but the problem seems to be that when I try and save anything with the @media statement, it ends up saving it like what’s shown below (notice the missing margin-right and margin-left) no matter how many times I fill in the missing lines and re-save. I suppose it’s an issue with the CSS plugin (JetPack Custom CSS), but from what I understand that file is stored in the database and generated dynamically and cannot be modified directly. So I’m not too sure how I can add this otherwise.

@media screen and (min-width: 1008px)
.bbpress .site-content {
	
}

[Robkk]

try this and make sure its above the other .bbpress .site-content {

@media screen and (min-width: 1008px) {
.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

[bsilverop]

Thanks. I’m just using one .bbpress .site-content because I’m keeping the right sidebar. Whenever I use the @media screen piece, it just chops off what’s below it. But yes, it does seem like it’s needed. The first other person to test said that the title of the page is cut off just a little bit on the left side, where as on my end it seems like there’s plenty of space.

This is all the custom CSS if it makes a difference:

.site,
.site-header {
	max-width: 100%;
}

.bbpress-forums .col-2cl .main {
	background: none repeat-y right 0;
	padding-right: 0;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
	max-width: 100%;
}

.form-allowed-tags {
	display: none;
}

div.bbp-breadcrumb, div.bbp-topic-tags {
	font-size: inherit !important;
}

#bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results {
	font-size: inherit !important;
}

#bbpress-forums {
	font-size: inherit !important;
	width: 100% !important;
}

.bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
}

And this is it after I add the @media screen tag (notice it just cuts off the rest):

.site,
.site-header {
	max-width: 100%;
}

.bbpress-forums .col-2cl .main {
	background: none repeat-y right 0;
	padding-right: 0;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
	max-width: 100%;
}

.form-allowed-tags {
	display: none;
}

div.bbp-breadcrumb, div.bbp-topic-tags {
	font-size: inherit !important;
}

#bbpress-forums ul.bbp-lead-topic, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results {
	font-size: inherit !important;
}

#bbpress-forums {
	font-size: inherit !important;
	width: 100% !important;
}

@media screen and (min-width: 1008px) {

[Robkk]

alright this should be your entire css now

if the @media queries still do not work try just adding them into your child themes style.css file.

if it still doesnt work when you put the media queries in your style.css make sure you are not using @import and instead using this in your child themes functions.php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

more info here https://codex.wordpress.org/Child_Themes

and also contact jetpacks plugin support and see if there is a problem or if i made another mistake or something

.site,
.site-header {
	max-width: 100%;
}

.bbpress-forums .col-2cl .main {
	background: none repeat-y right 0;
	padding-right: 0;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, 
.page-content {
	max-width: 100%;
}

.form-allowed-tags {
	display: none;
}

div.bbp-breadcrumb, 
div.bbp-topic-tags {
	font-size: inherit !important;
}

#bbpress-forums ul.bbp-lead-topic, 
#bbpress-forums ul.bbp-topics, 
#bbpress-forums ul.bbp-forums, 
#bbpress-forums ul.bbp-replies, 
#bbpress-forums ul.bbp-search-results {
	font-size: inherit !important;
}

#bbpress-forums {
	font-size: inherit !important;
}

@media screen and (min-width: 1008px) {
        .bbpress .site-content {
	margin-right: 0 !important;
	margin-left: 182px !important;
	}
}

@media screen and (min-width: 1080px) {
	.bbpress .site-content {
		margin-left: 222px;
	}
}

@media screen and (min-width: 673px) {
        .bbpress .site-content {
		margin-right: 0;
	}
}

you can see i removed the width:100% on the #bbpress-forums css code , its because it didnt really do anything.

[Robkk]

this css code i forgot to add , put it before the media queries

.bbpress .hentry {
    margin: 0px auto 48px;
    max-width: 100%;
}

[bsilverop]

Thanks so much again for looking at this. I just got done adding the CSS from your previous comment and it looked good to me (although it always has, it’s only on smaller monitors or screen sizes where it doesn’t I suppose). But then I added the last bit from your most recent comment and the forum page extends too far to the left in to the left sidebar. I’ve left it that way if you want to have a look, but perhaps that last piece is intended only if I want full width (without any sidebars at all)? Thanks again,