Post and Page width

Support
#1

I’ve added the following CSS for post width only:
 
/For blog index, individual posts, and archive pages/
@media (min-width: 768px) {
/main container/
.single-post .x-container.max,
.blog .x-container.max,
.archive .x-container.max {
max-width: 890px;
}

/right container/
.single-post .x-main,
.blog .x-main,
.archive .x-main {
width: 520px;
}

/sidebar width/
.single-post .x-sidebar,
.blog .x-sidebar,
.archive .x-sidebar {
width: 290px;
}
}
 
How could I get the same result for pages like https://goalsarecool.com/the-achievers-toolkit/ and https://goalsarecool.com/member-dashboard/ without impacting pictures and text on true full width pages like my homepage https://goalsarecool.com/ ?
 
Thanks in advance!
 
Blake

#2

Hi Blake,

It turns out that you have more pages to be modified the width than pages to not to. You should have the 890px as your site max-width (in Pro > Theme Options > Layout and Design) in the first place, so we only deal with those true (no container) full-width pages.

Anyways since we already have that CSS, please update that to this:

/*For blog index, individual posts, archive pages, and fullwidth and w/sidebar template pages*/
@media (min-width: 768px) {
/*main container*/
.page-template-template-layout-content-sidebar .x-container.offset,
.page-template-template-layout-full-width .x-container.offset,
.single-post .x-container.max,
.blog .x-container.max,
.archive .x-container.max {
	max-width: 890px;
}

/*right container*/
.page-template-template-layout-content-sidebar .x-main,
.single-post .x-main,
.blog .x-main,
.archive .x-main {
	width: 520px;
}

/*sidebar width*/
.page-template-template-layout-content-sidebar .x-sidebar,
.single-post .x-sidebar,
.blog .x-sidebar,
.archive .x-sidebar {
	width: 290px;
}
}

Hope it helps,
Cheers!

1 Like
#3

Thank you!
 
As it relates to pages, now I can choose between a true full width page by using the blank-no container template or I can choose the 890px width page by using the fullwidth template. This is exactly what I’ve been trying to figure out for a long time now and I really appreciate your help. My excitement has been reinvigorated. :slight_smile:
 
I guess the only other template that it would make sense to add the 890px width to is the blank-container template. That said, I haven’t been able to get the background to work so, I’m not sure how often I’ll actually use this template.
 
How would i make this work for search results like: https://goalsarecool.com/?s=test
 
These changes appear to have impacted the WooCommerce shop page and the individual product page. How can I make those pages (and only those pages) fullwidth again? https://goalsarecool.com/shop/
 
Thanks again!
 
Blake

#4

Hello Blake,

If you use the Layout - Fullwidth page template, in your custom css you will have to add this custom classes:

.page-template-template-layout-fullwidth .x-container.offset
.page-template-template-layout-fullwidth .x-main
.page-template-template-layout-fullwidth .x-sidebar

And for the search page, you will have to use this:

.search .x-container.offset
.search .x-main
.search .x-sidebar

For the shop page, you use this:

.archive.woocommerce .x-container.offset
.archive.woocommerce .x-main
.archive.woocommerce .x-sidebar

Hope this helps. Please let us know how it goes.

#5

I’m confused! I thought the CSS provided by @friech included the code for the fullwidth layout. Can you please clarify?

#6

Hi @goalsarecool

Yes I did, you can actually see the result on this page (https://goalsarecool.com/member-dashboard/)

The Shop page is affected because that is also using the archive template. Lets update the CSS code to exclude all Woocommerce pages, and lets add the search page.

/*For blog index, individual posts, archive pages, and fullwidth and w/sidebar template pages*/
@media (min-width: 768px) {
/*main container*/
.page-template-template-layout-content-sidebar .x-container.offset,
.page-template-template-layout-full-width .x-container.offset,
.single-post .x-container.max,
.blog .x-container.max,
.search .x-container.max,
body:not(.woocommerce-page).archive .x-container.max {
	max-width: 890px;
}

/*right container*/
.page-template-template-layout-content-sidebar .x-main,
.single-post .x-main,
.blog .x-main,
.search .x-main,
body:not(.woocommerce-page).archive .x-main {
	width: 520px;
}

/*sidebar width*/
.page-template-template-layout-content-sidebar .x-sidebar,
.single-post .x-sidebar,
.blog .x-sidebar,
.search .x-sidebar,
body:not(.woocommerce-page).archive .x-sidebar {
	width: 290px;
}
}

Cheers!

1 Like
#7

That worked… thanks @friech! :slight_smile:
 
Here is the current status for each template
 
Default template = 673 width (content left, sidebar right)
Blank – container | Header, Footer = 1111 width
Blank – container | Header, no footer = 1111 width
Blank – container | no header, no footer = 1111 width
Blank – no container | header, footer = true full width
Blank – no container | header, no footer = true full width
Blank – no container | no header, no footer = true full width
Blank – container | no header, Footer = 1111 width
Blank – no container | no header, Footer = true full width
Layout – content left, sidebar right = 520 width
Layout – fullwidth = 890 width
Layout – portfolio = haven’t tested
Layout – sidebar left, content right = 673 width
 
Question
1.) How could i make the following layout 520 width as well?
 
Layout – sidebar left, content right = 673 width

Thanks again!

Blake

#8

Hey Black,

If you want to add the Layout-sidebar left, content right, you will have to added this:
.page-template-template-layout-sidebar-content

The code could be this:

/*For blog index, individual posts, archive pages, and fullwidth and w/sidebar template pages*/
@media (min-width: 768px) {
/*main container*/
.page-template-template-layout-content-sidebar .x-container.offset,
.page-template-template-layout-sidebar-content .x-container.offset,
.page-template-template-layout-full-width .x-container.offset,
.single-post .x-container.max,
.blog .x-container.max,
.search .x-container.max,
body:not(.woocommerce-page).archive .x-container.max {
	max-width: 890px;
}

/*right container*/
.page-template-template-layout-content-sidebar .x-main,
.page-template-template-layout-sidebar-content .x-main,
.single-post .x-main,
.blog .x-main,
.search .x-main,
body:not(.woocommerce-page).archive .x-main {
	width: 520px;
}

/*sidebar width*/
.page-template-template-layout-content-sidebar .x-sidebar,
.page-template-template-layout-sidebar-content .x-sidebar,
.single-post .x-sidebar,
.blog .x-sidebar,
.search .x-sidebar,
body:not(.woocommerce-page).archive .x-sidebar {
	width: 290px;
}
}

Please let us know how it goes.

#9

Thanks @rueNel!

I will try try this and let you know how it goes. Also, my bbpress forums are usually full width, but they’ve been impacted by the size changes. Can you please tell me how to exclude the forums page as well? I tried using code similar to the way WooCommerce was excluded, but it didn’t work.

Thanks!
Blake

#10

Hi Blake,

You can try this classes.

body:not(.bbpress).archive .x-main

body:not(.bbpress).archive .x-sidebar

body:not(.bbpress).archive .x-container.max

Hope that helps.

#11

When I add this code it impacts the spacing between my posts and sidebar. Can you please assist?

#12

Hi There,

Can you add it then give us credentials on a secure note. Then give us the links where it is supposed to work too so we can compare what was happening on your single post.

#13

I do not provide admin access to my live site. I’ve had bad experience (not with Themeco) in the past and will not make that mistake again. :wink:

I found the following code in my Custom CSS…

/* Forums – Remove Sidebar */
.bbpress.forum-archive .x-main {
float: none;
width: 100%;
}

.bbpress.forum-archive .x-sidebar {
display: none;
}

I used this code to remove the sidebar from the Forums page. Is this causing the problem?

Thanks!

Blake

#14

Hi,

Please change your code to this

/* Forums – Remove Sidebar */
.bbpress.forum-archive .x-main {
     float: none !important;
     width: 100% !important;
}

.bbpress.forum-archive .x-sidebar {
    display: none !important;
}

Then move the code at the bottom of your Custom CSS.

That way it will not get affected by other codes.

Hope that helps

#15

That worked… thanks! :smile:

#16

Thanks for letting us know!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.