#StackBounty: #html #ios #css #firefox h2 elements all bunched up on top image on iOS & Firefox

Bounty: 100

On the site Codexr.io I am noticing that while the h2 elements work on any size browser for Chrome, however I am seeing with iOS and Firefox, all of the h2s are on top of one another in one of the main images.

Here’s the HTML:

Collaborative

And the CSS:

#top-area .top-area-text, #top-area .region-top-fifth h2, #top-area .region-top-fifth h2 {
    left: 0;
    text-align: center;
    top: 4em;
    width: 100%;
    color: white;
    font-size: 3em;
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    text-transform: uppercase;
}

#top-area .top-area-text {
    position: absolute;
}

Is there something I’m missing? Why is Chrome working but Firefox and iOS not? Is something malformed?


Get this bounty!!!