Grow your CSS skills. Land your dream job.

media screen help.

  • # June 9, 2013 at 12:10 am

    Hello.

    I Have set my desktop with at 1200px;. But would like to know how would I fix it so the normal laptop screen width would be suitable for my header cart.

    At the moment when go on to a lap top my header cart gets pushed over on to the search bar.

    /* layout */
    .container {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    #column-left {
    float: left;
    width: 180px;
    }
    #column-right {
    float: right;
    width: 180px;
    }
    #content {
    min-height: 400px;
    margin-bottom: 25px;
    }
    #column-left + #column-right + #content, #column-left + #content {
    margin-left: 195px;
    }
    #column-right + #content {
    margin-right: 195px;
    }
    /* header */
    #header {
    background: #fff url(../image/bg_top_red.jpg) repeat-x top;
    line-height: 25px;
    text-decoration: none;
    z-index: 100;
    height: 130px;
    margin-bottom: 40px;
    }
    #header-bottom {
    background: url(“../image/shadow.png”) repeat-x scroll center bottom transparent;
    margin-top: 0px;
    margin: 13px 0 7px;
    padding-bottom: 9px;
    position: relative;
    clear: both;
    }
    #header #logo {
    clear: both;
    float: left;
    margin: 29px 0 0;
    max-width: 190px;
    text-align: left !important;
    }
    #main-header #cart {
    position: absolute;
    top: 20px;
    right: 300px;
    z-index: 9;
    min-width: 300px;
    }

    # June 9, 2013 at 1:43 am

    You’ll have to use media queries and change all those fixed pixel width and position values.

    It’ll be a lot of work.

    # June 9, 2013 at 2:13 am

    On the media queries on this site it only showed desktop widths and tablets and phones can’t seem to find ones for laptops when type in google it only shows tablets etc.

    I will have another look at google.

    When set media queries is it best to have them on same css sheet or link it separate. I will finish desktop version first then set laptops.

    # June 9, 2013 at 6:45 am

    The media queries are just examples.

    In general the feeling is that you just set breakpoints wherever you think the design needs it at various screen sizes.

    If that is a non-standard number (like 1035.66px) then that’s what you do.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".