Varför försvinner 100px av sidan på en mobil?

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001

Varför försvinner 100px av sidan på en mobil?

Hej

Jag har denna kod

body { margin:0; padding:0; } .wrapper { position: absolute; left: 0px; top: 0px; width: 100%; height: auto; } .top_meny { width: 1080px; height: 100px; position:absolute; left: calc(50% - 540px); line-height: 100px; }

<div class="wrapper"> <div class="top_meny"> Välkommen till min hemsida! </div> </div>

På chrome, firefox och Edge visas top div i mitten av hela sidan. Men på en telefon med upplösning 1920x1080 eller annan så ser det ut såhär

GRUND CSS jag vet men jag vet ej och hittar inte hur man centrerar rätt, många skriver på detta vis.

Tittar jag via Chrome "granskning" så visas allt över 1080px bred men under så försvinner den tills 980px sen stannar den,

Varför försvinner den in till vänster?

Nu testar jag massa kod men skriver jag i wrappen och tar bort all position information i top_meny

padding-left: calc(50% - 540px);

så fungerar det som jag vill, men vad är den korrekta "50%" css formeln? Vill CENTRERA min hemsida i mitten.

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Trädvy Permalänk
Medlem
Plats
Halmstad
Registrerad
Feb 2010

@downup:

Har du med viewport?

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

Du kan även leka med värdet 1. 1 = 100%

Jag gillar när sidor har ca 0.5 eller mindre.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jul 2013
Trädvy Permalänk
Medlem
Registrerad
Jan 2008

Vill du centrera innehållet om webbläsarens bredd är bredare än en viss bredd så använder du max-width tillsammans med margin:auto;. Då centreras det om webbläsare är bredare än X, annars blir det 100%.

http://jsfiddle.net/Marwelln/5h5yhtv0/

<div class="wrapper"> <div class="top_meny"> Välkommen till min hemsida! </div> </div>

body { margin:0; padding:0; } .top_meny { background:darkred; color:white; padding:20px; margin:auto; max-width:200px; }

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001
Skrivet av visa:

@downup:

Har du med viewport?

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

Du kan även leka med värdet 1. 1 = 100%

Jag gillar när sidor har ca 0.5 eller mindre.

Ska testas tack

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana