www.webdeveloper.com
Results 1 to 3 of 3

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

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    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.

    opera 7.jpg

    fanks.

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    @media all and (max-width: 540px) and (min-width: 460px), (min-width: 1000px)
    Which min-width? Did you mean (max-width: 1000px)?

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    [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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles