[Resolved] Left sidebar does not fit

Home Forums Support Left sidebar does not fit

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1043945
    generatepressuser

    Hello,

    When the screen is smaller than 999px , the left sidebar looks ugly.

    When the screen is below 768px as mobile view, it looks better. But from 999px until 768px the left sidebar does not fit.

    How could I solve this? It would be nice when it looks like 768px already from 999px.

    Currently I have a @media which looks as following:

    media (max-width: 768px) {
    .site-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

    #left-sidebar {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    }

    .content-area {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    }

    #right-sidebar {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    }
    }

    #1044065
    David
    Staff
    Customer Support

    Hi there,

    are you actually using the Right Sidebar anywhere ?

    #1044099
    generatepressuser

    Hello,

    I have no right sidebar in use, only left sidebar. In the beginning I had a right sidebar but I decided to not use it.

    I just noticed something weird, not sure if its related. Inside the customizer its selected “Only Content” with No sidebars, but I am obviously using the left sidebar: https://ibb.co/Fz5xzgS

    #1044418
    David
    Staff
    Customer Support

    Try replacing your CSS with:

    @media(max-width: 999px) {
        .site-content {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
               -moz-box-orient: vertical;
               -moz-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        #primary, #left-sidebar {
            width: 100%;
            left: unset;
        }
        #left-sidebar {
            -webkit-box-ordinal-group: 0;
            -webkit-order: -1;
               -moz-box-ordinal-group: 0;
                -ms-flex-order: -1;
                    order: -1;
            width: 100%;
        }
    }

    You may want to add the necessary Flex prefixes.

    #1044611
    generatepressuser

    Hello,

    Thank you for the solution, now the issue is solved!

    I hope the necessary Flex prefixes are set correctly how I did?
    I have put them in two places, once in display:flex; and once in order: -1;


    @media
    (max-width: 999px) {
    .site-content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    }
    #primary, #left-sidebar {
    width: 100%;
    left: unset;
    }
    #left-sidebar {
    -webkit-box-ordinal-group: -1;
    -moz-box-ordinal-group: -1;
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
    width: 100%;
    }
    }

    #1044662
    David
    Staff
    Customer Support

    I updated my CSS to cover all of them 🙂

    #1045409
    generatepressuser

    Thank you, I now updated, there is always something missed when I do it on my own 🙂

    Best regards!

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