Grow your CSS skills. Land your dream job.

[Sooooolved!] Problem With Responsive Web Design HELP MEEEEE…!!!!!!!

  • # October 4, 2011 at 2:07 am

    Can you help Me? I have practiced @media for responsive web design on my blog (See my blog and resize the window!), but there is something odd. The dimension of #sidebar-wrapper and #main-wrapper could not be seen, but instead shrank as if it could determine the division of the lid.
    Anyone have the answer?

    This is what I did:

    @media screen and (max-width: 860px) {
    #out-shadow{margin:0 auto 500px;}
    #main-wrapper{
    float: none;
    width: 100%;
    }
    #sidebar-wrapper{
    float: none;
    width: 100%;
    }
    }

    Pleeeeeeeaaseeeeeeeeeeeeee.. Hhhhhhhhhhheeeeeeeellllllllllpppppppppppppppp meeeeeeeeeee!!!!!!!!! >_<

    # October 4, 2011 at 10:56 pm

    Oh, I forget about display: inline; factor

    This is the final:

    @media screen and (max-width: 860px) {
    #out-shadow{
    margin:0px 8px 500px;
    }

    #main-wrapper,ol.commentlist,#respond{
    float:none !important;
    display:block;
    width:auto;
    margin:0 1% 10px;
    }

    ol.commentlist,#respond{
    height:200px;
    margin-right:0px;
    }

    #sidebar-wrapper{
    float:none !important;
    display:block;
    width:auto;
    margin:0 1% 0;
    }

    .alaihumcrumb span.kanan{
    display:none;
    }
    }

    @media screen and (max-width: 1024px) {
    #out-shadow{
    width:99%;
    margin:23px 0.5% 500px;
    }
    }

    @media screen and (max-width: 480px) {
    #out-shadow{
    width:100%;margin:0;
    }

    #header-wrapper h1,#header-wrapper .description,.alaihumcrumb{
    display:none;
    }

    html{
    -webkit-text-size-adjust:none;
    }

    span.oktroi span[style]{
    display:none;
    }
    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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