Results 1 to 11 of 11

Thread: Optimizing css stylsheet for different resolutions

  1. #1

    Join Date
    Aug 2004
    Location
    syracuse
    Posts
    360
    Rep Power
    14

    Optimizing css stylsheet for different resolutions

    I am working on building a blog. It is a simple blog with 3 columns.

    When I change the width below from 86% to 75%, the middle (main) column looks perfect on my computer but then looks all out of wack on a different computer under a different resolution.

    Is there a way that I can "define the width in concrete" so that the middle column looks the same under different resolutions?

    Thanks



    #doc {


    background-color: #ffffff;

    padding:0px;
    width: 86%;
    }

  2. #2

    Join Date
    Aug 2004
    Location
    syracuse
    Posts
    360
    Rep Power
    14
    Or is there a way where I can do the following in css...

    if resolution is 800+, then set width at 86%

    if resolution is 420+, then set width at 75%

  3. #3
    Custom User Title entrecon's Avatar
    Join Date
    Aug 2006
    Location
    Michigan
    Posts
    2,742
    Rep Power
    17
    Can't you set the width in px too instead of using % ?
    ________________________________
    Find me on twitter: @entrecon

  4. #4
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    You can use media queries in your stylesheet to control the display. While Internet Explorer didn't support them until IE9, this is not often an issue for checking screen width since the devices with limited dimensions all rely on compatible browsers.
    Code:
     @media screen and (min-width:420px) {
    #doc { width: 75%; }
     }
    
     @media screen and (min-width:800px) {
    #doc { width: 86%; }
     }
    Searching on "media queries" should point you to some tutorials. Good luck!
    Rick Trethewey

  5. #5
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    That is just sweet! I'll be putting that in my bag-o-tricks. I can see lots of potential in mobile browsers there.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  6. #6
    Custom User Title tpoynton's Avatar
    Join Date
    Sep 2004
    Location
    Mass
    Posts
    2,177
    Rep Power
    18
    It is precisely these posts that keep me on this forum, thanks Rick!

  7. #7

    Join Date
    Aug 2004
    Location
    syracuse
    Posts
    360
    Rep Power
    14
    Thanks Everyone.

    Is it possible to apply this same "@media screen" width concept to images?

    For example, right now I set the size of my image as width="612" height="559". However I would like the size of the image to adjust accordingly alongside the resolution.

    for example-
    Access blog on phone or tablet = smaller image
    Access blog on desktop = larger image

    Thanks!!

  8. #8
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    The short answer is yes, of course. But this is one of many "God is truly in the details" issues you face in creating a site that's both desktop and mobile friendly. I'd suggest you start with this article on Combining Meta Viewport and Media Queries which is helpful because smart phones do not natively constrain themselves to the dimensions of their screens in pixels. They're perfectly happy to squeeze the page to fit the screen and let the user zoom in and out. Then, with that under your belt, you can check out another article, Responsive Web Design: 5 Handy Tips that has a good discussion on handling images for mobile devices.
    Rick Trethewey

  9. #9

    Join Date
    Aug 2004
    Location
    syracuse
    Posts
    360
    Rep Power
    14
    I have a 3-column wordpress layout (css). It is a mess under different resolutions. The widths of the 3 columns all mesh up under different resolutions

    But for other blogs/sites that use 3-column wordpress layouts, this does not happen. Everything (images, columns, etc) decrease or increase in proportion to the resolution.

    Is it because I did not define the width of the 3 columns? If so, how do I go about doing so? In the css style sheet?

  10. #10

    Join Date
    Aug 2004
    Location
    syracuse
    Posts
    360
    Rep Power
    14
    I want to define a fixed-width for each of the 3 columns

    thx!

  11. #11
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    I can't be sure what the problem is without seeing the code, but if you want a fixed width for each of the columns then you should certainly define them.

    Be sure to check out those two articles I suggested above. They will give you a good sense of what's involved in creating a site that dynamically changes depending on the user's screen dimensions using what they call "Responsive Design". It's not for everyone, though. Unless your site has the potential get a substantial amount of mobile traffic, I wouldn't sacrifice a solid design that works well on desktops and laptops. Smartphone users can still access those sites. It's just less convenient because they have to zoom in and out. Good luck!
    Rick Trethewey

Posting Permissions

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