responsive div blocks don't align properly on mobile device - html

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

It's difficult to debug without being able to inspect the site first hand. From first glance though, I would try adding a float and clear to the .calRow class, provided it is what it sounds like (the rows that make up the calendar).
.calRow {
float: left;
clear: both;
width: 100%;
}
Keep in mind by floating the calendar rows you will most likely need to also float the calendar container.
If that doesn't solve the problem it's most likely related to your absolute positioned elements not being positioned relatively to their parent element.
EDIT: I should add, if you have access to safari, an iPhone and a cord to plug the iPhone into your desktop. You can inspect the site using safari on your desktop by going to 'Develop' > 'iPhone'. More info on remote debugging here.

Answer 2

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.