Mariëlle Mariëlle - 3 months ago 15
CSS Question

Absolute element not responsive in portrait mode phone

I have an absolute DIV that sits on top of the page. I made it responsive so it gets smaller on smaller devices and it seems to work (on laptop and on landscape mode on phones) except on portrait mode on phones (I tested it on iPhone & Samsung). I have no idea what it could be. It doesn't seem to listen to the @media queries, it only becomes smaller when I change the actual div's width and height outside of the @media queries.

You can see the div here: http://f4g.marilnu149.149.axc.nl/index.html (the logo on the top left)

CSS: (I'm using 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 you in advance to anyone who can help!

Answer

From what I see, you are not setting any @media for devices smaller than 400px. All your @media query say min-width, thus apply for devices greater than the width. Thus, it uses the standard value of width: 10em in your primary .logo definition for devices narrower than 400px.

Thus, one option would be to simply change your primary definition to something smaller than 10em, e.g. 3em:

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