Keep sidebars the same width when responsive [option]

Hmm, because the theme uses percentages for the layout, this would be very hard to achieve. Maybe not impossible, but definitely not easy.

It's just that the sidebars become too narrow for them to be much use as they get narrower.

Hmm yea, I can see how that could be an issue.

Your best bet is to use @media queries to change the width of the content grid and sidebar grid as you size down - Inspect the elements to see what classes deal with width, and then overwrite their values in your own CSS.

Inspect the elements to see what classes deal with width, and then overwrite their values in your own CSS

Any chance in giving me a clue on this :)

So for example, if your sidebar is set to 25%, the classes for the sidebar and content will be:

Sidebar: .widget-area.grid-25
Content: .content-area.grid-75

So using @media queries, we can change the width of those areas at certain break points, for example:

/* kick in once the browser hits 1200px wide */
@media screen and (max-width: 1200px) {
      .widget-area.grid-25 {
            width: 30%; /* change it from 25% to 30% (or whatever) */
      }
      .content-area.grid-75 {
            width: 70%; /* change it from 75% to 70% */
      }
}

/* kick in once the browser hits 1000px wide */
@media screen and (max-width: 1000px) {
      .widget-area.grid-25 {
            width: 35%; 
      }
      .content-area.grid-75 {
            width: 65%;
      }
}

/* kick in once the browser hits 800px wide */
@media screen and (max-width: 800px) {
      .widget-area.grid-25 {
            width: 40%; 
      }
      .content-area.grid-75 {
            width: 60%;
      }
}

Let me know if that makes sense :)

Ahhhh gotcha I'll try it out tonight. Thanks.

How do I change the width in which the sidebar moves under the content area?

And, having said that, How do I change the width in which the menu/s become responsive?

I'm having trouble finding the css for each different layout...
content/sidebar
sidebar/content
sidebar/content/sidebar
sidebar/sidebar/content
content/sidebar/sidebar

Any chance you could provide some css that will enable us to simple tweak the % at some standard widths for each layout

Changing the mobile break-point would involve altering core files, which you would need to do each time you updated the site.

If that doesn't bother you, open these two files:

/generatepress/css/ie.css
/generatepress/css/mobile.css

Search for: 768px

And replace with your desired value.

You can target the content and sidebar width for each layout by placing the class of that layout in front of the CSS above.

Each layout: body class

content/sidebar: .right-sidebar
sidebar/content: .left-sidebar
sidebar/content/sidebar: .both-sidebars
sidebar/sidebar/content: .both-left
content/sidebar/sidebar: .both-right

So if I want to target the widths when I have a left sidebar only, I would do this:

.left-sidebar .widget-area.grid-25 {
      ...
}
.left-sidebar .content-area.grid-75 {
      ...
}

Changing the mobile break-point would involve altering core files
Why can't we over ride it with the css plugin or a child theme?

Because @media queries can't be overridden like regular CSS - browsers will always choose to read that CSS when that break-point hits.

Of course, you can copy the files and place them in your child theme, then make the changes.

However, you'll then miss out on any updates I make to those files in the future.

If you could have an option to keep the site width, content width and sidebar width all fixed (like responsive) that would be awesome as that way the sidebar can be kept the same width.

While it would be possible to do with custom CSS, it would be a pain, especially as the entire framework is based on percentages, and making them fixed widths would basically remove any responsiveness from the site.

By fixed I mean like the 'responsive' theme. Not unresponsive fixed. having a set number of different widths that we can choose from rather than a percentage system... the narrow sidebar is a major issue for me.