- This topic has 34 replies, 4 voices, and was last updated 6 years, 2 months ago by
Pete.
-
AuthorPosts
-
November 29, 2014 at 9:01 pm #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.
November 30, 2014 at 12:58 am #49937Tom
Lead DeveloperLead DeveloperHmm, because the theme uses percentages for the layout, this would be very hard to achieve. Maybe not impossible, but definitely not easy.
November 30, 2014 at 5:17 am #49972Pete
It’s just that the sidebars become too narrow for them to be much use as they get narrower.
November 30, 2014 at 6:31 pm #50098Tom
Lead DeveloperLead DeveloperHmm 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.
November 30, 2014 at 11:39 pm #50108Pete
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 ๐
December 2, 2014 at 3:06 pm #50770Tom
Lead DeveloperLead DeveloperSo 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-75So 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 ๐
December 2, 2014 at 3:10 pm #50772Pete
Ahhhh gotcha I’ll try it out tonight. Thanks.
December 2, 2014 at 11:36 pm #50857Pete
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?
December 3, 2014 at 6:07 am #50929Pete
I’m having trouble finding the css for each different layout…
content/sidebar
sidebar/content
sidebar/content/sidebar
sidebar/sidebar/content
content/sidebar/sidebarAny chance you could provide some css that will enable us to simple tweak the % at some standard widths for each layout
December 3, 2014 at 12:12 pm #51084Tom
Lead DeveloperLead DeveloperChanging 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.cssSearch 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-rightSo 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 { ... }
December 4, 2014 at 5:29 am #51180Pete
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?December 4, 2014 at 9:57 am #51225Tom
Lead DeveloperLead DeveloperBecause @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.
December 6, 2014 at 11:30 pm #51973Pete
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.
December 8, 2014 at 9:51 am #52658Tom
Lead DeveloperLead DeveloperWhile 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.
December 11, 2014 at 1:00 am #53742Pete
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.
-
AuthorPosts
- You must be logged in to reply to this topic.