[Resolved] Change Breakpoint of Left Sidebar

Home Forums Support [Resolved] Change Breakpoint of Left Sidebar

Home Forums Support Change Breakpoint of Left Sidebar

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #590609
    Chris

    Hello,

    I am trying to change the breakpoint for 2 items in unison:

    1. The point at which the top navigation becomes mobile – which I found directions for here:

    https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    2. The point at which the left sidebar disappears (I want it to happen sooner). I cant seem to find any information for this one. Can you tell me the proper way to do it without destroying the rest of the theme.

    I am using a 3 column layout (left and right sidebars) – here is the test site:
    http://www.internationallovescout.info

    Thanks

    GeneratePress 2.1.2
    #590669
    David
    Staff
    Customer Support

    Hi Chris, this is the CSS that controls the stacking of the sidebars and widgets:

    @media (max-width: 768px) {
        .content-area, .inside-footer-widgets>div, .sidebar {
            float: none;
            width: 100%;
            left: 0;
            right: 0;
        }
    }
    #591178
    Chris

    Thanks for the reply.

    I tried putting the css in simple css and changing the max-width number both higher and lower but it doesn’t seem to have any effect. I also added “!important” to the individual css items.

    Also, I would like to change the breakpoint ONLY for the left sidebar. The code above looks like it will change the break point for both left and right sidebar. Is there a way to target only the left sidebar?

    Thanks

    #591187
    Chris

    Actually I figured out the first part of the problem and it works as expected now – I was missing the opening “{”

    But the 2nd half still applies. How can I target only the left sidebar?

    Thanks!

    #591646
    David
    Staff
    Customer Support

    Hi Chris,

    OK, slightly more complicated, instead of the code above, we can try using a flex box – just need to set the max and minimum widths that you want the layout to work with:

    @media (max-width: 768px) and (min-width: 500px) {
    	.site-content {
    		display: flex;
    		-webkit-flex-flow: row wrap;
    		flex-flow: row wrap;
     	}
        
    	#left-sidebar {
    		order: 3;
    		width: 100%;
    		left: 0;
    
    	}
        
    	.content-area {   
    		-webkit-order: 2;  
    		order: 1;
    		width: 70%;
    		left: 0;
    
    	}
    
    	#right-sidebar {
    		-webkit-box-ordinal-group: 3;
    		-moz-box-ordinal-group: 3;
    		-ms-flex-order: 3;
    		-webkit-order: 3;
    		order: 2;
    		width: 20%;
    	}
    }
    #591720
    Chris

    That works great for the left sidebar – but now the right sidebar doesn’t disappear anymore. Is there a way to control the right breakpoint too, or to have it disappear at it’s original breakpoint?

    Thanks!

    #591727
    David
    Staff
    Customer Support

    Hi Chris, adjust the break point heights, with min width set to 768px like so:

    @media (max-width: 900px) and (min-width: 768px)

    #592441
    Chris

    I still can’t get this to work.

    I broke the css above into 3 sections; right sidebar, left sidebar, and content like this:

    ———————
    /* Change right sidebar breakpoint */


    @media
    (max-width:1000px) and (min-width: 768px) {

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

    /* Change left sidebar breakpoint */


    @media
    (max-width:1000px) and (min-width: 768px) {

    #left-sidebar {
    order: 3;
    width: 100%;
    left: 0;

    }
    }

    /* Change content breakpoint */
    @media (max-width:1000px) and (min-width: 768px) {

    .site-content {
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }

    .content-area {
    -webkit-order: 2;
    order: 1;
    width: 70% !important;
    left: 0;

    }
    }
    —————————-
    I am able to control the breakpoint for the left sidebar – but I can’t get the right sidebar to disappear before 768px. At that breakpoint the right sidebar is still visible on the tablets I checked it on, which looks strange.

    I would like to have the sidebar disappear around 850px. Can you tell me how I can do that.

    Here is the site if you want to take a look:
    http://staging-internationallovescout.kinsta.com/

    Thanks!

    #628572
    David
    Staff
    Customer Support

    Chris, apologies – this topic somehow slipped past us, did you find a resolution?

    #630779
    Chris

    Actually I am still having the problem. I am not happy with the right sidebar breakpoint, it should break earlier so there is no right sidebar on tablets.

    You can see the live site here:

    https://www.internationallovescout.com/colombian-brides

    I couldnt figure out how to do a screen shot on a tablet but I simulated the issue on my desktop browser as you can see below:

    2018-07-23_2329

    I thought perhaps the problem was that I was using a 3 column layout but when I look at another one of my sites that I am using generatepress on it has the same issue as you can see here:

    2018-07-23_2333

    And here is an example of the tablet behavior I would like to emulate – this is a genesis theme:

    2018-07-23_2334

    is there a way to control the right sidebar breakpoint?

    Thanks

    #630909
    David
    Staff
    Customer Support

    Hi there, it looks like the right side bar is breaking at the same point as the left sidebar. The only missing part is this CSS:

    /* Change content breakpoint */
    @media (max-width:1000px) and (min-width: 768px) {
    
    .site-content {
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    }
    
    .content-area {
    -webkit-order: 2;
    order: 1;
    width: 70% !important; /* This needs to be increased to 100% */
    left: 0;
    
    }
    }

    See the comment on the width property – increase this to 100%.

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