Navigation buttons move around in responsive design This is kinda strange, I'm using flexslider module in which my navigation (previous &amp; next) buttons on 1320.css, 960.css are centered fine on the slider. When I get to the 720.css and mobile.css versions, that is when the navigation buttons start moving around. Ether they are above or below the slider in which it's pointless to even display on :hover by ~50px. Lastly, I noticed that I cannot replicate on a desktop/laptop browser, it only gets introduced when using a mobile browser of any type of phone.  

Below is a snippet from the Flexslider.css that pertains to the navigation:

.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}


Any ideas?  I noticed that 'top: 50%;' moves them  but again a can't figure out a way to get them to always be centered. Also I should mention that I'm running alpha 2 but it occurs in both alpha 3 and alpha 2 versions of Flexslider.
To resolve the problem I used @media queries to distinguish a different setting per responsive size. So I copied and deleted line 58 (.flex-direction-nav a) from the flexslider.css. I then added this code below at the bottom for the CSS file. *This is also good as you can control the nav in all variations of size. for instance in the mobile @media below I dropped the buttons down (removed top: 50%; from mobile) some to help users see the flexslider on a small screen better.   

/* LANDSCAPE PHONE TO DOWN MOBILECSS */
@media all and (max-width: 480px) {
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute;  z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
}

/* LANDSCAPE PHONE TO PORTRAIT TABLET MOBILECSS */
@media all and (max-width: 759px) {
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute;  z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
}

/* LANDSCAPE DESKTOP TO DOWN 720CSS */
@media all and (min-width: 481px) (max-width: 760px) {
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%;  z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
}

/* PORTRAIT TABLET TO LANDSCAPE AND DESKTOP 720CSS */
@media all and (min-width: 761px) and (max-width: 980px) {
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%;  z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
}

/* LAGACY DESKTOPS 960CSS */
@media all and (min-width: 981px) and (max-width: 1289px) {
  .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
}