The first change you’d need to do would be this:
`#wrapper {
font-size: 0.6875em;
margin: 0px auto;
width: 1000px;
}`
That’s basically fixing your entire site to 1000px. Now, what you can do is change that to a percentage ie; 100%. If you want it to respond though you probably want to have it max-width set something like max-width:1260px. However, once you do that a lot of other CSS things will need changing so I’d recommend working through each of those one by one using something like Firebug or another inspector tool. http://getfirebug.com/
Responsive web design (as it’s known) is a major subject area — basic fluid designs are one approach (percentage widths and so on, and will help with your white space concern), but it’s a much richer field than just that.
Check out a book such as: http://www.abookapart.com/products/responsive-web-design/
You can also look at some of the responsive ‘frameworks’ as a base for your site – twitter’s bootstrap, zurb’s foundation, or Andy Clarke’s 320 and up.
You’ll also find plenty of responsive themes for WordPress (2011 included), that can be enhanced to support BuddyPress.
Just to add to that reading list would be http://www.abookapart.com/products/mobile-first/. BuddyPress default itself is to a point responsive now (but not mobile first). The theme you mention Shawn38 isn’t and therefore will if you want not just a 100% width but a proper ‘responding to devices’ probably cause some issues.
I just set my page body width to 100% and it fixed my resolutions.
Okay thank you @karmatosed and @rogercoathup.MyI theme is not surrounded by a typical wrapper div instead its a container div and its set at 100% unless I am missing something or I have been doing this so long I have gone code blind but if I am wrong please help. I use firebug regularly but I am having an issue pin pointing how to make this particular theme responsive. Thanks!
Hi @shawn38, I showed you the div that you can interact with to change the width. I saw this looking at your site in Firebug and examining the wrapper about your container.
`#wrapper {
font-size: 0.6875em;
margin: 0px auto;
width: 1000px;
}`
But, as @rogercoathup just making that 100% isn’t what making your theme responsive means. If you want to do that you have to look at how it looks on a range of devices and change things using media queries (http://www.w3.org/TR/css3-mediaqueries/) for instance.
@karmatosed I will try your suggestion and implement it in my css. Thanks!
@karmatosed I tried your suggestion but it didn’t work. Is there anyone that can lend me a hand on this. I am having a hard time targeting the CSS to make buddypress corporate theme responsive. Thanks!
@shawn38 – as @karmatosed and I have pointed out, you won’t be able to make the Corporate Theme ‘responsive’ just by setting a percentage width for the outer wrapper.
It will probably take a lot of work, and just for starters you’ll have to consider the knock on effect of changing the outer container to a percentage width on all the elements it contains. Do they have fixed widths, margins, etc, etc. specified, how will floating elements react, and so on.
@karmatosed @rogercoathup Okay I guess I knew this was the case all along. I guess I was just hoping for some ingenious shortcut that would save me from having to manually go in and change every CSS element in this theme to make it more responsive. Thanks for the input!
