Forums

Hompimpa

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!!!!!!!!! >_<

Hompimpa

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

treehouse : what would you like to learn today?

Forums

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