Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 1st attempt at a ‘responsive simple layout’. Please critique my work.

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #36367
    JohnMotylJr
    Participant

    This is my attempt at a very simple layout that will stretch with the page and/or device.

    Dropbox Link:
    http://dl.dropbox.com/u/47096192/css-tricks/index.html
    HTML Code:






    This is



    Lorem Ipsum text



    CSS Code:


    * {
    margin:0;
    padding:0;
    }
    #page-wrap {
    width:980px;
    height:100%;
    margin:0 auto;
    border:1px solid black;
    background:black;
    }
    h1 {
    color:#999;
    }
    html {
    background:white;
    }
    p {padding:10px;}
    #header {
    width:980px;
    background:yellow;
    height:125px;
    margin:0 auto;
    }
    .nav {
    width:150px;
    height:124px;
    display: block;
    float: left;
    border:1px solid black;
    }

    /*****************************************************
    CSS will style between 0px & 480px (Screen Size)
    *****************************************************/
    @media screen and (min-width: 0px) and (max-width: 480px) {
    html {
    background: red;
    }
    #page-wrap {
    width:95%;
    height:100%;
    }
    h1:after {
    content:"0px - 480px";
    }
    p {
    color:red;
    }
    #header {
    width:95%;
    height:125px;
    }
    .nav {
    width:100%;
    height:30px;
    }
    }
    /*****************************************************
    CSS will style between 481px & 600px (Screen Size)
    *****************************************************/
    @media screen and (min-width: 481px) and (max-width: 600px) {
    html {
    background: #ccc;
    }
    #page-wrap {
    width:95%;
    height:100%;
    }
    h1:after {
    content:"481px - 480px";
    }
    p {
    color:#ccc;
    }
    #header {
    width:95%;
    height:100px;
    }
    .nav {
    width:20%;
    height:99px;
    }
    }
    /*****************************************************
    CSS will style between 601px & 980px (Screen Size)
    *****************************************************/
    @media screen and (min-width: 601px) and (max-width: 980px) {
    html {
    background: blue;
    }
    #page-wrap {
    width:95%;
    }
    h1:after {
    content:"601px - 980px";
    }
    p {
    color:blue;
    }
    #header {
    width:95%;
    }
    .nav {
    width:20%;
    }
    }
    /*****************************************************
    CSS will style between 981px & Maximum (Screen Size)
    *****************************************************/
    @media screen and (min-width: 981px) {
    h1:after {
    content:"over 980px wide";
    }
    p {
    color:white;
    }

    }

    If it isn’t great or could use some new logic please let me know.

    Thank you.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.