Need help with fixing Sidebar and Container width by category.

I tried to make the container full-width with

.container.grid-container {
      max-width: 100%;
}

But it is not working for me!

What I want is:
Left Sidebar: No padding or margin. 200PX width for menu link.
Content: Automatically Fit to the available space.
Right padding: 200PX (This required for the Sticky Table of Contents)

This is needed to be done for some specific category's pages.

Hi there,

try this CSS:

@media(min-width: 769px) {
    .left-sidebar.has-ftoc #content {
        max-width: 100%;
    }
    
    .left-sidebar.has-ftoc .site-content {
        display: flex;
    }
    .left-sidebar.has-ftoc #primary {
        left: unset;
        width: calc(100% - 500px); /* 500px = total left sidebar and TOC width */
    }
    .left-sidebar.has-ftoc #left-sidebar {
        max-width: 200px;
        left: unset;
        order: -1;
    }
}

It will apply only to posts that have a left sidebar and the TOC plugin.

Perfect! This is what I needed! :)

I need two more things to be done is, Moving the sidebar vertically centered and 5px margin to the left!

I was able to add padding. But vertically-align: middle did not work. But I think, I am better to stick with current configuration!

Thanks for your support, David!

You're welcome

How do I set some padding for the post content only when viewed on mobile?

Try this CSS:

@media (max-width: 768px) {
    .full-width-content .inside-article {
        padding: 20px !important;
    }
}

Perfect again!

You're welcome