1

This is kinda strange, I'm using flexslider module in which my navigation (previous & 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.

1 Answer 1

0

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;}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.