Trying to use @media but the url is only filling a third of the width.

I am trying to make my site fluid, adaptive or even like the changeling on deep space 9.

I am using this css code for @media

Code:

---

@media all and (max-width: 540px) and (min-width: 460px), (min-width: 1000px) {
  body {
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 90px; 
}
#main-box {
    position: relative; left: 1%;
    position: relative; right: 1%;
}
}

---

The body section is this;

body {
max-width: 98%;
margin: 0 auto;
padding-bottom: 90px;
background-color: #c0c0c0;
}

the text with border element is this;

Code:

---

#main-back {
    background-color: #fffff0;
    padding-top:20px;
    padding-bottom: 40px;
}
#main-box {
    padding-bottom: 20px;
    background-color:#FFFFFF;
    position: relative; left: 15%;
    position: relative; right: 15%;
    position: relative; top: 30px;
    padding: 10px;
    border-color: #D5D6FF;
    border-style: outset;
    border-width: 4px;
    text-align: left;
    font-family: arial,san-serif;
    font-size: 1.00em;
    color: black;
  }

#main-box img.align-left {
    float: left;
    }
#texted-1 {background-color:#FFFFFF;
          padding-left: 10px;
          padding-right: 10px;
          font-family: arial;
          font-size: 1.00em;
          color: black;
}

---

Can someone tell what to do to get the page to load at 98% with a 1% margin? At the moment it loads at around 30% and is aligned to the left. You can see what I mean in the attached file.

Attachment 15095

fanks.

Quote:

---

@media all and (max-width: 540px) and (min-width: 460px), (min-width: 1000px)

---

Which min-width? Did you mean (max-width: 1000px)?

[CODE]@media all and (max-width: 540px) and (min-width: 460px), (min-width: 1000px)[code] {

Thanks for your reply.

I got the above code from an article about fluid design. Personally I don't understand why the (min-width: 1000px) is needed. I've tried removing it. there is no change in the result.

I used the (max-width: 540px) and (min-width: 460px) to cater for most small screens. I'm not sure if I can delete the min-width: 1000px comment. I'll give it a go.

the mn-width that I am using is 480px but I am not sure if this is low enough.

Is there a recommendation for screen sizes to detect as there seem so many of them?

I have attached a screen print that shows the problem. It is here >> Attachment 15101

If you want to see the full css code it is here