[Resolved] Keep sidebars the same width when responsive [option]

Home Forums Support [Resolved] Keep sidebars the same width when responsive [option]

Home Forums Support Keep sidebars the same width when responsive [option]

Viewing 15 posts - 1 through 15 (of 35 total)
  • Author
    Posts
  • #49931
    Pete

    I’d like to see (even if it’s an option) for the sidebar to remain the same width even when the screen width reduces. At the moment both the content and the sidebars become narrower. What about just the content area.

    #49937
    Tom
    Lead Developer
    Lead Developer

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

    #49972
    Pete

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

    #50098
    Tom
    Lead Developer
    Lead Developer

    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.

    #50108
    Pete

    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 ๐Ÿ™‚

    #50770
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #50772
    Pete

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

    #50857
    Pete

    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?

    #50929
    Pete

    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

    #51084
    Tom
    Lead Developer
    Lead Developer

    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 {
          ...
    }
    #51180
    Pete

    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?

    #51225
    Tom
    Lead Developer
    Lead Developer

    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.

    #51973
    Pete

    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.

    #52658
    Tom
    Lead Developer
    Lead Developer

    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.

    #53742
    Pete

    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.

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