Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to make website automatically scale to the screen size

  • Avatar of @shawn38
    Anonymous

    I designed this site: http://www.snaplist.net23.net on a netbook with a small screen. Once I checked it out in a decent sized laptop it has lots of white space on the sides. I would like it to automatically scale to the size of the users screen. I am using wp 3.2.1, bp 1.5.1, and the WPMU Dev Corporate theme. Please help! Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    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/

    Avatar of Roger Coathup
    Roger Coathup
    Participant

    @rogercoathup

    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.

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    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.

    Avatar of raminjan
    raminjan
    Participant

    @raminjan

    I just set my page body width to 100% and it fixed my resolutions.

    Avatar of @shawn38
    Anonymous

    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!

    Avatar of Tammie
    Tammie
    Moderator

    @karmatosed

    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.

    Avatar of @shawn38
    Anonymous

    @karmatosed I will try your suggestion and implement it in my css. Thanks!

    Avatar of @shawn38
    Anonymous

    @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!

    Avatar of Roger Coathup
    Roger Coathup
    Participant

    @rogercoathup

    @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.

    Avatar of @shawn38
    Anonymous

    @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!

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.