[Resolved] Align blog content to middle, but space widget sidebar

Home Forums Support Align blog content to middle, but space widget sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1386848
    Adam

    Next question, how can I move/align my blog content so it’s in the middle of the space.

    I basically want to squish it in at the sides when on desktop, but i also want to maintain a 50px gap between the blog content and the sidebar.

    I’ve tried adding:


    @media
    (min-width:769px) {
    .single.one-container .site-content {
    padding-left: 175px;
    padding-right: 175px;
    }
    }

    .sidebar .widget {
    margin-left: 50px;
    }

    But this just pushes both the sidebar and blog toward the middle.

    I want the sidebar to be up against the right side of the whole page container, a gap of 50px then the blog content centered in the space that’s left.

    #1386877
    David
    Staff
    Customer Support

    Hi there,

    remove your CSS and try this:

    @media(min-width: 1024px) {
        .single-post .site-content {
            display: flex;
        }
    
        .single-post .site-content:before {
            content: '';
            display: block;
            width: 25%; /* Set value to width of right sidebar */
        }
    
        .single-post #primary,
        .single-post #right-sidebar {
            float: none;
            left: unset;
        }
    }
    #1386891
    Adam

    Ok, that does it…but it does it for the whole site, not just the blog/single post section.

    #1386899
    David
    Staff
    Customer Support

    Updated the CSS to apply to single posts only

    #1387079
    Adam

    That’s what i’m after, only issue is it now pushes over the widgets to off-center when viewed on a mobile?

    #1387124
    David
    Staff
    Customer Support

    That code should not effect Mobile sizes – just changed the code above to apply only to screens over 1024px. Try that.

    #1388419
    Adam

    That didn’t work 🙁
    I did however add padding on the mobile footer, which then straightened it up perfectly.

    #1388812
    David
    Staff
    Customer Support

    Glad to hear you found a solution

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.