Witam. Chciałbym, żeby strona, której kod HTML i CSS podam poniżej miała taki sam układ strony na urządzeniach mobilnych, czyli http://pics.tinypic.pl/i/00726/7t56nei6mq4r.png jednak nie wiem jak się do tego zabrać. Na urządzeniach moblinych wygląda to mniej więcej tak: http://pics.tinypic.pl/i/00726/w146nddguryq.png poprostu content idzie pod nav.
O to kod HTML
sory, ale podam w zip, bo ograniczenie znaków :D
http://www.mediafire.com/download/2p8aqhzue0hcp9r/index.zip
Kod CSS:
#page
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logoa
{
background-color: black;
padding: 15px;
width: 170px;
}
#logob
{
background-color: black;
color: white;
text-align: center;
padding: 15px;
width: 800px;
}
#logo
{
display: flex;
}
#container
{
display: flex;
}
#nav
{
background-color: gray;
padding: 5px;
min-height: 620px;
width: 240px;
padding-top: 30px;
}
#content
{
width: 825px;
background-color: white;
min-height: 620px;
padding: 15px;
}
#footer
{
background-color: black;
text-align: center;
padding: 15px;
color: white;
}
img
{
display: block;
margin: 0 auto;
padding-left: 30px;
}
a
{
text-decoration: none;
color: blue;
}
h4
{
margin-top: 0;
margin-bottom: 0;
}
ul.linki, ul.linki li.linki
{
margin: 0;
padding: 0;
}
ul.linki
{
width: 200px;
}
ul.linki a:link, ul.linki a:visited
{
display: block;
width: 186px;
text-decoration: none;
background-color: #ccc;
color: #000;
padding: 5px;
border: 2px outset #ccc;
}
ul.linki a:hover
{
border-style: inset;
padding: 7px 3px 3px 7px;
}
ul.nav, ul.nav li.nav
{
margin: 0;
padding: 0;
}
ul.nav
{
width: 200px;
}
ul.nav a:link, ul.nav a:visited
{
display: block;
width: 186px;
text-decoration: none;
background-color: white;
color: green;
padding: 5px;
border: 2px outset black;
}
ul.nav a:hover
{
border-style: inset;
padding: 7px 3px 3px 7px;
}
ul.home, ul.home li.home
{
margin: 0;
padding: 0;
}
ul.home
{
width: 200px;
}
ul.home a:link, ul.home a:visited
{
display: block;
width: 186px;
text-decoration: none;
background-color: #906030;
color: black;
padding: 5px;
border: 2px outset black;
}
ul.home a:hover
{
border-style: inset;
padding: 7px 3px 3px 7px;
}