Support » Theme: GeneratePress » Have different .inside-article padding width depending on whether sidebar displa

  • Resolved jwqchen

    (@jwqchen)


    Hi Tom, I have some posts that display a right sidebar, and other posts that do not have a sidebar.

    Only for the posts that do not have a sidebar, I want to make the .inside-article left and right padding larger. Is there a way do that? Thanks so much for your help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Leo

    (@leohsiang)

    Hi there,

    Instead of increasing the padding when there is no sidebar present, what if we use a narrower container with this CSS?

    body.no-sidebar .site.grid-container {
        max-width: 800px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

    Leo

    (@leohsiang)

    If you prefer to to increase the padding instead, this is the CSS:

    body.no-sidebar .inside-article {
        padding-left: 40px
        padding-right: 40px;
    }
    jwqchen

    (@jwqchen)

    The narrower container solution works very well. Thank you so much, Leo!

    One other sidebar-related question: is there a way specify at what screen widths the sidebar should display and hide? The default setting seems to hide the sidebar when the screen is smaller than 770px. Is there a way to hide it at a larger screen size? Thank you!

    Leo

    (@leohsiang)

    Sidebar is re-position to below content (not hidden) at 768px by default.

    You can use this CSS to hide it at the desired width:

    @media (max-width: 1000px) {
        .sidebar {
            display: none;
        }
    }
    jwqchen

    (@jwqchen)

    Oh yeah my bad – it’s actually re-positioned, not hidden. Is there a way for it to reposition to below content at a larger screen size?

    Leo

    (@leohsiang)

    Give this a shot:

    @media (max-width: 1000px) {
        #content {
            display: flex;
        }
    }
    jwqchen

    (@jwqchen)

    Hmm… that didn’t quite work. It actually makes the sidebar stay on the side for longer before getting re-positioned below. That’s the opposite effect from what I was hoping for…

    Leo

    (@leohsiang)

    Oops try this instead:

    @media (max-width: 1000px) {
        #content {
            display: flex;
            flex-direction: column;
        }
    }
    jwqchen

    (@jwqchen)

    Cool! That works! I also added align-items: center; to #content so the content centers. Thanks a lot, Leo!

    Leo

    (@leohsiang)

    No problem 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Have different .inside-article padding width depending on whether sidebar displa’ is closed to new replies.