Nie działa mnie position: absolute

Question

Witam!

Mam problem,  zrobiłam  sobie stronę  żeby słuchać RadioOffKraków,  w przegłądarce wszytko dliała, ale na telefonie nie tak jak chcę i nie rozumiem czemu,  mam

.myPlayer 
position: absolute;
left: 0;
bottom: 0; -  ale na telefonie to nie działa(

link do github -> https://github.com/radianteyed/radio_offkrakow

Chciałam zapytać, jak z tym poradzić? 

Answer 1

Nie mam czasu wrzucić tego na codepen-a ale może pomogę.

Odradzam stosowanie pozition: abslotue na 80% elementów i umieszczania całego contentu w <header>.

Spróbuj dać position: relative dla header-a albo wrzucić .myPlayer w diva Main.

Comments

Dziękuję, będę starać się bez tych position absolute.

Answer 2

Za dużo overflow: hodden;

Zrób v-header głównym pojemnikiem i daj mu position relative i overflow hidden, to załatwi sprawę wszystkich pasków.

I już innemu elementowi nie nadawaj relative.

Bo przede wszystkim video rozpycha stronę, a reszta powinna się mieścić bez  żadnych sztuczek z ukrywaniem.

Main wyśrodkuj za pomocą

.main {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

 

Comments

O dziękuje to działa. Więc to video rozwaliło mnie wszytko.