Absolutes Element reagiert nicht im Hochformat Telefon

Question

Ich habe einen absoluten DIV, der oben auf der Seite sitzt. Ich habe es reaktionsfähig gemacht, so dass es auf kleineren Geräten kleiner wird und es scheint zu funktionieren (auf dem Laptop und im Querformat auf Handys) außer im Hochformat auf Handys (Ich testete es auf dem iPhone & Samsung). Ich habe keine Ahnung, was es sein könnte. Es scheint nicht auf die @ media-Abfragen zu hören, es wird nur kleiner, wenn ich die Breite und Höhe der tatsächlichen div außerhalb der @ media-Abfragen ändere.

Sie die div hier sehen können: http://f4g.marilnu149.149.axc.nl/index.html (das Logo oben links)

CSS: (Ich bin mit Skeleton)

.logo { 
    position: absolute; 
    margin-top: 0; 
    margin-left: 50px; 
    width: 10em; 
    height: 10em; 
    background: #201616; /* Old browsers */ 
    background: -moz-linear-gradient(top, #201616 0%, #7c1b1b 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(top, #201616 0%,#7c1b1b 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to bottom, #201616 0%,#7c1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#201616', endColorstr='#7c1b1b',GradientType=0); /* IE6-9 */ 
} 

.logo img { 
    max-width: 100%; 
} 

/* Larger than mobile */ 
@media (min-width: 400px) { 
    .logo { 
    width: 4em; 
    height: 4em; 
    } 
} 

/* Larger than phablet (also point when grid becomes active) */ 
@media (min-width: 550px) { 
    .logo { 
    width: 4.5em; 
    height: 4.5em; 
    } 
} 

/* Larger than tablet */ 
@media (min-width: 750px) { 
    .logo { 
    width: 5em; 
    height: 5em; 
    } 
} 

/* Larger than desktop */ 
@media (min-width: 1000px) { 
    .logo { 
    width: 8em; 
    height: 8em; 
    } 
} 

/* Larger than Desktop HD */ 
@media (min-width: 1200px) { 
    .logo { 
    width: 10em; 
    height: 10em; 
    } 
} 

HTML:

<div class="logo"> 
    <img src="images/logo.png" /> 
</div> 

Thank Sie im Voraus für jeden, der Ihnen helfen kann!

Answer 1

Von dem, was ich sehe, setzen Sie keine @media für Geräte kleiner als 400px. Alle Ihre @media Abfrage sagen min-width, gelten somit für Geräte größer als die Breite. Daher verwendet es den Standardwert width: 10em in Ihrer primären .logo-Definition für Geräte, die schmaler als 400px sind.

Eine Option wäre also einfach Ihre primäre Definition zu etwas kleiner als 10em, z. 3em:

.logo { 
    position: absolute; 
    margin-top: 0; 
    margin-left: 50px; 
    width: 3em; 
    height: 3em; 
    … 
}