Sziasztok!

A következőben kérnék segítséget.
Adot egy oldal, nnek szeretném most elkészíteni egy mobilbarát változatát.
Próbáltam átírni a css-t, de szétesik az oldal. Hogyan kéne megírnom ezt a részt? Előre is köszi

A:link{
text-decoration: none; color: white;
}
A:visited{text-decoration: none;
}
A:active{text-decoration: none;
}
A:hover{text-decoration: none; color: yellow;
}

body{
margin:0;
padding:0;
line-height: 1.5em;
}

em{
font-size:x-large;
}

red{
color: #FF0000;
}

#maincontainer{
width: 1024px;
margin: 0 auto;
background: #000000;
}

#header{
height: 80px;
background-image:url('fejlec_hatter.jpg');
}

#header h1{
margin: 0;
padding-top: 10px;
padding-left:128px;
color: #FFFFFF;
font-family:'Arial';
font-weight:lighter;
text-shadow: 3px 3px 1px #000000;
}

#header h2{
margin: 0;
padding-top: 10px;
padding-left:128px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;
}

#header h3{
margin: -52px;
padding-left:800px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;
}

#header h4{
padding-left:750px;
padding-top:37px;
color: #FFFFFF;
font-family: 'Arial';
font-weight:lighter;

}

#contentwrapper{
float: left;
width: 100%;
}

#leftcolumn{
float: left;
width: 512px;
color: #FFFFFF;
}

#contentcolumn{
margin-left: 512px;
color: #FFFFFF;
font-size:14px;
}

#vlinetwo{
height: 40px;
}

#vlineone{
height: 20px;
}

#footer{
height: 80px;
clear: left;
background-image:url('lablec_hatter.jpg');
}

#footer h5{
margin: 0px;
color: #000000;
font-family: 'Arial';
font-size:14px;
padding-top: 40px;
padding-left: 15px;
font-weight:lighter;
font-variant:small-caps;

}

td{
/*<!-- color:#F0F;-->*/
font-family: 'Arial';
font-size: 14px;
white-space:pre-line;
padding-left: 32px;
/* text-align:justify;*/
}

/* tr{font-family: 'Arial';
font-size: 20px;
white-space:pre-line;
padding-left: 32px;
text-align:justify;*/
}

p{
/* color:#F0F;*/
font-family: 'Arial';
font-size: 14px;
width:450px;
text-align:justify;
}