[Resolved] Need help with fixing Sidebar and Container width by category.

[techs]

I am using Fixed TOC as the Right sidebar, so I need space to the right. Currently, it is fine.

I am trying to make the left sidebar just move completely to left without any padding or margin.
And the content fit into rest space automatically. I tried to do it with custom layout but I don’t know how to work with the left sidebar widget.

As I want to accomplish this for some specific category, I would like to do it by the hook.

[techs]

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.

[David]

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.

[techs]

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!

[techs]

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!

[David]

You’re welcome

[techs]

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

[David]

Try this CSS:

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

[techs]

Perfect again!

[David]

You’re welcome

[Author]

Posts