responsive div blocks don't align properly on mobile device

Question

I have a shift calendar for a local fire department that I built using foundation5 responsive css framework. Everything works great when viewing in my browser and resizing the window.
example:

However, when I view this on an iPhone the calendar days are moved one block up.

Here is my css:

.calRow {
    max-width:100%;
}
.calMonth, .calPrev, .calNext {
    text-transform:uppercase;
    font-weight:bold;
    color:gray;
    font-size:1.7em;
    margin:15px 0;
    text-align:center;
}
.calMonth {
    text-align:center;
}
.calPrev {
    text-align:left;
}
.calNext {
    text-align:right;
}
.pCal ul li {
    text-align:center;
    height:0;
    padding:0 0 14.28571%;
    border-left:solid 1px gray;
    border-top:solid 1px gray;
    position: relative;
}
.pCal ul li:after {
    content:'';
    display: block;
    margin-top: 100%;
}
.pCal ul li dl {
    position:relative;
    padding:0;
    margin:0;
    top:0;
    height:100%;
}

.pCal ul li dl dt {
    padding:0;
    margin:0;
}
.pCal ul li.calHead {
    font-size:0.8em;
    border:none;
    color:gray;
    height:25px;
    margin-bottom:-20px;
}
.calToday {
    border-bottom:0.5em solid lightGrey;
}

.calDay {
    position:relative;
    padding:15%;
    margin:0;
    top:-100%;
}

.calLayer2, .calLayer3, .calLayer4 {
    position:relative;
    padding:0;
}
.calLayer2 {
    top:-200%;
}
.calLayer3 {
    top:-300%;
}
.calLayer4 {
    top:-400%;
}

/*  SHIFT HEIGHT / SIZE STYLES  */

.shift2 {
    height:50%
}
.shift3 {
    height:33.33%
}
.shift4 {
    height:25%
}


/* OVERLAY STYLES  */
.calX img{
    width:100%;
    padding-top:2%;
}
.calCircle img{
    width:100%;
    padding:9% 7%;
}
.calSquare img {
    width:100%;
    padding:7%;
}

.pCal .calDayParts {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.pCal .calDayOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

Can someone help me figure out why this is or at least suggest a way to debug it.

Thanks

EDIT 1 JS FIDDLE LINK

GO HERE for jsfiddle example - same issue is present when viewed on phone

side note, this answer has instructions on how to use iPhone over local network to connect to localhost of IIS on windows PC

Answer 1

Okay, so the problem was not with the css exactly. There were other styles bleeding into my styles. I placed this css inside an angular2 component and "encapsulated" the css, then it worked without the positioning error. It wraps the code in a shadow dom

I never did find out what style was bleeding into mine but the problem is now solved.