[Resolved] Displaying widget content horizontally under content

[Michael]

I really want to do something with the sidebars of my site. I feel they’re too distracting, but I like how they highlight the latest posts and features.

Is there any way at all of making the widget content show horizontally under the main content, so list the latest 5 posts for example would spread out underneath the main content rather than display vertically down etc.

Any feedback would be greatly appreciated.

[David]

Hi there,

something like this CSS:

@media (min-width: 769px) {
    #primary, #right-sidebar {
        width: 100%;
        float: none;
    }
    #right-sidebar ul {
        display: flex;
    }#right-sidebar li {
        flex-basis: 20%; 
        margin-bottom: 2em !important;
    }
}

[Michael]

That is perfect David, I searched high and low for an answer to this today. If I still needed the regular sidebar for one widget (table of contents) , would that be possible ?

Thank you so much !

[Michael]

Oh and as bad luck would have it, there’s some widgets that use <div> to show their content, so they still display vertically. Wish I knew more about CSS. I experiment, but I just end up breaking things. You can see what I mean if you go to the latest downloads page, and see how the latest downloads are coded in the widgets. More complex than I first thought.

[Tom]

What if you do this as well in the media query?:

.sidebar .widget > div {
    display: flex;
}

.sidebar .widget > div > div {
    flex-basis: 20%; 
    margin-bottom: 2em !important;
}

[Michael]

Oh come on now, if ever there was an award for best support, you guys should just keep the trophy. Thank you so much Tom and David. Very much appreciate, and hope you’re keeping safe.

[Tom]

Glad we could help! You too 🙂

[Michael]

I’m pushing it !

Everything is perfect aside from two things, one is the widget titles seem to be a part of the divs, so they’re being displayed horizontally as the first item. Any way I can get the Widget Title to appear above the widget items centrally ?

https://prnt.sc/rsgumc

Also… there’s one widget I had in my sidebar a TOC widget that stayed fixed on certain posts. So the user could navigate between the sections of long posts. Is there any way at all of reinstating the sidebar as vertical for just certain posts?

Realise I am asking a lot here, and if it’s too much I’d understand if you don’t have the time for these.

[David]

Try replacing this:

.sidebar .widget > div {
    display: flex;
}

with:

.sidebar .widget > div {
    display: flex;
    flex-wrap: wrap;

    /* Optional to center widgets */
    justify-content: center;
}

.sidebar .widget > div > .widget-title {
    flex-basis: 100%;
}

[Michael]

Thanks David, very much appreciated.

[David]

Glad we could be of help

[Author]

Posts