[Resolved] Displaying widget content horizontally under content

Home Forums Support Displaying widget content horizontally under content

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

    #1222094
    David
    Staff
    Customer Support

    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;
        }
    }
    #1222564
    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 !

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

    #1222823
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1223085
    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.

    #1223761
    Tom
    Lead Developer
    Lead Developer

    Glad we could help! You too 🙂

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

    #1225445
    David
    Staff
    Customer Support

    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%;
    }
    #1225978
    Michael

    Thanks David, very much appreciated.

    #1226090
    David
    Staff
    Customer Support

    Glad we could be of help

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