Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    456
    Thanks
    0
    Thanked 20 Times in 20 Posts

    Need an html trick

    Not sure how to explain this so...

    I'm used to designing sites on a monitor with an 800 by 600 resolution using a 780px width page base and now I updated my monitor so everything previously designed looks really small. Because of this it's causing problems with new site developement. I mean as long as the website uses a fullpage layout things look fine to me but if I add a left or right column spacing, font sizes etc. just don't look right. Like a spacial or relational difference or something.

    Is there a simple way to adapt web designing to a higher resolution and get the same results at a lower one?
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there c1lonewolf,

    check out...

    And here is a very basic example...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>basic media queries</title>
    
    <style>
    @media (min-width:0) {
    body {
        font-size:90%;
     }
    #container {
        padding:60px 0;
     }
       }
    @media (min-width:800px) {
    body {
        font-size:90%;
     }
    #container{
        padding-top:60px;
     }
       }
    @media (min-width:900px) {
    body {
        font-size:110%;
     }
    #container{
        padding:70px 0;
     }
       }
    @media (min-width:1000px) {
    body {
        font-size:130%;
     }
    #container {
        padding:80px 0;
     }
       }
    @media (min-width:1100px) {
    body {
        font-size:150%;
     }
    #container {
        padding:90px 0;
     }
       }
    @media (min-width:1200px) {
    body {
        font-size:170%;
     }
    #container {
        padding:100px 0;
     }
       }
    body {
        min-width:800px;
        background-color:rgb(241,241,241);
     }
    #container {
        width:90%;
        margin:auto;
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.5),10px 10px 10px rgba(0,0,0,0.5);
     }
    h1 {
        margin:0;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    
    </body>
    </html>
    coothead


  •  

    Posting Permissions

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