SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Adjusting Page Width Based on Screen Resolution

    Hi all ,

    My entire page is fluid and based on percentages. The only issue is that a critical part of my page uses 12.5%, which FireFox/Chrome round down to 12%, thus entirely messing up the look/layout of the page. As such, the solution I thought of is instead of using a 100% page width, change the page width respective of the user's screen resolution (please let me know if there is a better method I can use to not have to worry about this .5% issue). Here is the code I have so far:

    HTML:
    Code:
    <link type="text/css" href="style.css" rel="stylesheet" media="all">
    <div id="container"></div>
    CSS:
    Code:
    #container {
    	margin: 0 auto;
    	width: 100%;
    }
    @media all and (min-width:1024px) { #container { width: 1000px; } }
    @media all and (min-width:1280px) { #container { width: 1256px; } }
    Above, I set the default width at 100%, but what would be the best width for me to put there to accommodate "Unknown" resolutions?

    I should also mention that above, I only included 2 min-width's, but in actuality I will include the following 42 different min-width's:
    Code:
    376
    400
    416
    432
    480
    512
    528
    540
    640
    720
    768
    800
    824
    832
    854
    864
    960
    1024
    1120
    1152
    1280
    1366
    1400
    1440
    1600
    1680
    1792
    1800
    1856
    1920
    2048
    2304
    2538
    2560
    2800
    2880
    3200
    3840
    4096
    5120
    6400
    7680
    Please let me know if this is the right approach or if there is some better solution. Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to mention--the reason that the layout becomes messed up due to this half percentage is because it is not a fixed width, so as such, when you multiply .125 * screen resolution, it involves decimal points which get rounded down by webkit browsers, thus messing up my neat looking layout.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    thus messing up my neat looking layout.
    If you want fluid designs, you may have to think differently about layouts. Trying to lock down the layout at so many screen widths is impractical. It's better to design your elements so that they can afford to be more fluid. If you have fixed width elements, just choose a break point at which the layout of elements just can't work any more. Like when you have a flexible width element next to a fixed width element. At some point, the flexible element will become too narrow, at which point you just need to drop it below or whatever.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph! Actually, the entire page and all its elements are fluid. Originally, the page width was 100%, but then I made it as I described above (fixed) to get rid of this issue of Webkit browsers rounding down from 12.5% to 12%.

    In any case, you're right that perhaps I should rethink my design. I'm going to see if I can just make my element work at 12% instead of 12.5%.

    Thanks!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    I'm going to see if I can just make my element work at 12% instead of 12.5%.
    Ultimately, browsers have to calculate everything in px, and some times they will have to do a bit of founding. So you need to leave a bit of room for this, unless you specify your break point in px rather than in %.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ultimately, browsers have to calculate everything in px, and some times they will have to do a bit of founding. So you need to leave a bit of room for this, unless you specify your break point in px rather than in %.
    Yes, you're right. I'm experiencing the same issues now with 12% as I was with 12.5%. How bad or wrong is it if I try to lock down the layout at dozens of various screen width ranges? What's the worst that can happen?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    How bad or wrong is it if I try to lock down the layout at dozens of various screen width ranges? What's the worst that can happen?
    The worst that can happen is that you'll chew up a lot of time. I don't see any other problem than that it's a bit inefficient.

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The worst that can happen is that you'll chew up a lot of time. I don't see any other problem than that it's a bit inefficient.
    Thanks Ralph!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •