Change SideBar Width on Single Post Only

Hi, I got this.

I did a bad mistake over here.

Correct CSS,

@media (min-width: 769px) {
.single-post #left-sidebar,#right-sidebar{width: 22.5%;}
.single-post #left-sidebar{left: -55%;}
.single-post #primary {width: 55%;left: 22.5%;}
}

• This reply was modified 4 years, 7 months ago by qph9697.

Hi, I have one question.

Is it possible to implement the CSS on only some categories?

Example:
I have 3 categories say “X”, “Y”, “Z”.

And Each category contains 3 posts.

Is there a way to use a particular CSS for Category “X”s posts. (i.e. run CSS for all posts only in category “X” and not in “Y” or “Z”)

It will be a great help for me if something like this without the use of a plugin is possible.

Thank You.

Hi there,

Each category/post type has unique classes in the body tag that you can target.

You can see them if you use a browser inspector tool.

Hi, here I am talking about the posts within a category.

Example:
https://questionpapershub.com/category/competetive-exams/gate/ – This is a category which consists of 2 blogs.

How can I add CSS, such that it affects the 2 blogs in the above category only?

Each category/post type has unique classes in the body tag that you can target.

This will only change the layout of the category page, but now the posts that are within the category.

You could try adding the class in with this PHP snippet:
https://generatepress.com/forums/topic/single-post-content/#post-755481

Adding PHP: https://docs.generatepress.com/article/adding-php/

Hi, I tried the code provided by David.

The code isn’t working.

I added the PHP as it is, in my snippet plugin.

And added the following css in Customize:

@media (min-width: 769px) {
.single-post.category-job-alerts #left-sidebar,#right-sidebar{width: 22.5%;}
.single-post.category-job-alerts #left-sidebar{left: -55%;}
.single-post.category-job-alerts #primary {width: 55%;left: 22.5%;}
}}

But this is not working. And when adding the “category-slug” in CSS, it adds some extra padding on the right of every page.
Screenshot: https://ibb.co/8rVbzzh

The category page URL is,
https://questionpapershub.com/category/job-alerts/

I have already activated the PHP snippet, it will be great if you can have a look.

Thank You.

The class name is wrong.

If you right click and use the browser inspector tool, you can see the correct classes in the body tag:
https://www.screencast.com/t/2C69oqBMs4b

Thank You, it’s working now. ??

And should I remove this php?

add_filter(‘body_class’,’add_category_to_single’);
function add_category_to_single($classes) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
}
}
// return the $classes array
return $classes;
}

• This reply was modified 4 years, 7 months ago by qph9697.

You would need to keep that CSS – it’s adding the category class name which you are using in your CSS.