Problem med mobil version av websida
Jag har gjort sidan www.denmagiskabiodagen.se och nu försöker jag göra en som är anpassad för mobilen. Jag har lyckats att få så att man automatiskt hamnar på www.denmagiskabiodagen.se/mobil om man surfarm en mobil läsare. Mitt problem är att jag inte lyckas få till css filen att göra det jag vill. Jag vill tex att bilden på första sidan ska fylla ut läsarens bredd helt, hur åstadkommer jag detta?
Index.htm ser ut såhär:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset ="utf-8">
<title>Den Magiska Biodagen 2015</title>
</head>
<body>
<div id="navcontainer">
<img class="centerimage "src="../img/banner.png"></img>
<ul>
<li><a href="index.htm">Hem</a></li>
<li><a href="program.htm">Program</a></li>
<li><a href="biljetter.htm">Biljetter</a></li>
<li><a href="hitta.htm">Hitta hit</a></li>
<li><a href="boende.htm">Boende</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
</ul>
</div>
<div id="maintext">
<p>
<h1>Den Magiska Biodagen<br>12 December 2015</h1>
</p>
<p>
<img src="../img/hardtoget2.jpg"></img>
</p>
<p>
<b>Välkommen till hemsidan för Den Magiska Biodagen i Alingsås som är en av Sveriges minsta men bästa filmfestivaler!</b>
</p>
<p>
Festivalen som startade 2006 firar nästa år sitt 10 års jubileum! Festivalen började med små steg och hade runt 20 besökare första åren.
Den har genom åren blivit något av en instiution för skräck och genrefilms fans Sverige över och många kallar festivalen för årets höjdpunkt och kommer så långväga ifrån som Malmö och Piteå!
</p>
<p>
Förutom biovisningarna så bedrivs det hela dagen försäljning av filmer ute i foajen. En av tysklands bästa filmaffärer "Hard to get videos" från Hamburg kommer till festivalen och kommer fulllastade med 100-tals tyska hårdboxar och andra dvd:er som man aldrig ser i Sverige! Plus denna försäljare kommer en rad andra som också säljer film.
</div>
</body>
</html>
Css filen ser ut som följer
body {
background: black;
background-attachment: fixed;
color: white;
text-align:center;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 20pt;
}
a:link {
color: white;
}
h1 {
font-size:30pt;
color: #FF850B;
}
#navcontainer{
height: auto;
width: 400px;
}
#navcontainer li{
height: 100px;
text-align: center;
vertical-align: middle;
float: none;
text-transform: uppercase;
list-style: none;
background: #B34700;
margin: 10px auto auto auto;
}
#navcontainer a{
line-height: 40px;
color:black;
font-size: 28pt;
}
#navcontainer ul{
position: relative;
}
.maintext{
min-width:100%;
}
Några andra tips när man gör en mobil version av en hemsida?
