Problem med mobil version av websida

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Okt 2007

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?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Okt 2010

Börja med att kolla upp en liten kodbit som heter @media (Du kan googla till w3schools), där kan du säga till element att vara olika width och float mm vid olika upplösningar vilket används för att skapa mobilanpassade hemsidor.

EMS Design Webbyrå i Stockholm:
http://www.emsdesign.se
Inet Fraktfritt
https://www.inet.se/artikel/6101343/
"Citera för svar/respons"

Trädvy Permalänk
Medlem
Registrerad
Mar 2015

Du behöver inte skicka till en separat adress. Som Eric nämnde ovan kan du använda media queries. Skulle gissa på nedanstående för din sida. Lägg sist i samma css-fil som du redan använder.

@media screen and (max-width: 500px) { .banner, #navcontainer, #maintext{ width: 100%; } }

Trädvy Permalänk
Medlem
Registrerad
Jan 2008

Lägg till

<meta name="viewport" content="width=device-width, initial-scale=1">

i din head till att börja med.

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport...

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Nov 2007

Japp media queries, jobba utifrån principen mobile first.

Trädvy Permalänk
Medlem
Plats
127.0.0.1
Registrerad
Apr 2010

Enklast är som @qbasic säger, gå från mobil till desktop. Tvärtom är svårare.

Citera om du vill ha svar, hjälpte jag dig, gilla svaret!