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

Home Forums Support Need help with fixing Sidebar and Container width by category.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1348181
    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.

    #1348372
    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.

    #1348487
    David
    Staff
    Customer Support

    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.

    #1348638
    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!

    #1348753
    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!

    #1349156
    David
    Staff
    Customer Support
    #1349752
    techs

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

    #1349773
    David
    Staff
    Customer Support

    Try this CSS:

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

    Perfect again!

    #1349792
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.