[Resolved] Change layout breakout from 768px to 980px

Home Forums Support Change layout breakout from 768px to 980px

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1436081
    Deepak

    Hello Team,

    Currently by default the theme layout is set to change at 768px when both sidebars move below primary section.

    Is it possible to either
    1. Set break point for 980px when only right sidebar goes below primary content and the main screen only contains left sidebar+primary content and at 768px left sidebar goes down the primary content for mobile devices

    OR

    2. Move both sidebars to bottom at 980px instead of 768px

    I would prefer option 1 if possible. Can you please help me with the custom CSS required for this approach.

    I tried Menu plus element but it seems like it is only able to set the break point for MENU which I feel wrong, ideally we should give this option to end user so he/she can set a break point based on their requirement for entire website layout and not only for the MENU?

    Regards
    Deepak

    #1436328
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media(max-width: 980px) and (min-width: 768px) {
        .site-content {
            flex-wrap: wrap;
        }
        .site-content .content-area {
            width: 75%;
        }
        #left-sidebar {
            width: 25%;
        }
        
        #right-sidebar {
            width: 100%;
        }
    }
    #1436340
    Deepak

    Thanks David.

    It worked perfectly.

    #1436474
    David
    Staff
    Customer Support
    #1470807
    Deepak

    Hello David,

    Recently I switched my sticky sidebar from right to left so now my left sidebar is sticky.

    Can you please help me with the CSS with the same requirement but now the left sidebar should go below the primary content and the screen should contain right sidebar+main content

    I tried to change the sidebar value in the provides css from left to right but it didn’t worked properly as instead of going down, the left sidebar content went above the main content.

    Thanks again

    Regards
    Deepak

    #1470921
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Does this do it?:

    @media(max-width: 985px) and (min-width: 768px) {
        .site-content {
            flex-wrap: wrap;
        }
    
        .site-content .content-area {
            width: 75%;
        }
    
        #right-sidebar {
            width: 25%;
            order: -10;
        }
    
        #left-sidebar {
            width: 100%;
            order: 10;
        }
    }
    #1471179
    Deepak

    Hi Tom,

    Yes it worked, although I see the right sidebar comes to the left side at the provided width which also works for me

    So all good

    Thanks

    Can you please confirm though if the left sidebar sticky issue is fixed with GP 3.0 and it will remain the way it is as it was not working with 2.X?

    #1471938
    Tom
    Lead Developer
    Lead Developer

    It wasn’t an intentional thing we did, but perhaps changing to flexbox from floats fixed it. Nothing should change in 3.0 between now and the official release 🙂

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