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

[tony webb]

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

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

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

opera 7.jpg

fanks.

[auntnini]

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

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

[tony webb]

[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 >> opera 7.jpg

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