elements not going to proper position switching from portrait to landscape ipad

I have media queries for ipad in landscape and portrait mode to position elements a certain way in each view. I have everything looking the way it should, but the design breaks when I rotate from portrait to landscape. The proper layout will comeback if I refresh while on landscape, but I'm not understanding why it's breaking from portrait to landscape. And I have no problems when rotating from landscape to portrait.

here's the HTML

<main class="cf container">
    <section class="cf weather-forecast">
        <div class="loc-time">
            <h1 id="location"></h1>
            <p class="day" id="day"></span></p>
        </div>

        <div class="cf main-forecast">
            <p class="temp" id="temp"></p>
            <p class="summary" id="summary"></p>
            <p class="icon" data-icon="" id="icon"></p>
        </div>

        <hr>

        <div class="sub-forecast">
            <p>Feels Like <span class="sub-forecast--feels" id="feels"></span></p>
            <p>Windspeed <span class="sub-forecast--wind" id="wind"></span></p>
            <p>Humidity <span class="sub-forecast--humidity" id="humidity"></span></p>
        </div>

        <footer>
            <p>Weather source <a href="http://www.weather.com/"></a>weather.com</p>
        </footer>
    </section>
</main>

and CSS
     body,
    html {
  background-color: #ffffff;
  height: 100%;
}

body {
  font-family:"Apercu Light", Calibri, sans-serif;
  font-size: 100%;
  font-size-adjust:0.508;
  font-style:normal;
  font-weight:200;
}

.container {
  min-height: 100%;
  margin: 0 auto;
  position: relative;
  width: 80%; /* 1280 / 16 */
}

.day {
  font-size: 1.000em;
}

.icon {
  font-size: 4.688rem;
  margin-left: 5.21472392638%;
  top: 4.063rem;
}

#location {
  font-size: 1.500em;
}

.icon,
.summary {
  position: absolute;
}

.icon,
.temp,
.summary {
  display: inline-block;
}

.summary {
  font-size: 1.063em;
  margin-left: 5.36809815951%;
  top: 1.875em;
}

.main-forecast {
  position: relative;
  margin-bottom: 1.250em;
  margin-top: 2.188em;
}

.sub-forecast {
  margin-top: 1.875em;
  width: 40%;
  max-width: 222px;
}

.sub-forecast > p {
  line-height: 24px;
}

.sub-forecast--feels {
  margin-left: 43.2432432432%; /* 96 / 252 */
}

.sub-forecast--humidity {
  margin-left: 45.045045045%; /* 100 / 222 */
}

.sub-forecast--wind {
  margin-left: 38.2882882883%;
}

.temp {
  font-size: 8.438em;
}

.temp-fahrenheit {
  font-size: 2.188rem;
  margin-left: 1.250rem;
  vertical-align: super;
}

.weather-forecast {
  margin-left: 8.875em;
  margin-top: 20.438em;
  width: 50.9375%; /* 652 / 1280 */
}

footer {
  bottom: 0;
  font-family:"Apercu Regular", Calibri, sans-serif; 
  font-size: 0.688em;
  font-weight:normal;
  position: fixed;
}

/*--------------------------media Queries----------------------------------------*/

/***** 
  Tablet
*****/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .sub-forecast {
    min-width: 238px;
  }

  .weather-forecast {
    margin-top: 12.188em;
  }
} /* end @media max-width: 728px orientation: landscape */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .icon {
    padding-top: 10px;
  }

  .icon,
  .summary {
    margin: 0;
    position: static;
  }

  .icon,
  .temp,
  .summary {
    display: block;
  }

  .sub-forecast {
    min-width: 240px;
  }

  .weather-forecast {
    margin-top: 16.500em;
  }
} /* end @media max-width: 1024px orientation: portrait */