CODEWITHSUNDEEP
jqueryflexslider
coderatlarge
coderatlarge

Reputation: 649

Flexslider works only when i rotate phone

On the homepage of my site (https://www.shopez.in), the flexslider works only when I rotate my phone (horizontal position). In the normal vertical position it does not work. I am using jquery.flexslider.js jquery. In Firefox and other desktop browsers, it works perfectly. The issue is occuring for both ios/android phones

<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
       animation: "fade"
});
});
// ]]></script>
<div class="flexslider">
  <ul class="slides">
     <li><img src="{{media url='wysiwyg/Banner01.jpg'}}" alt="" /></li>
     <li><img src="{{media url='wysiwyg/organic_honey_big.jpg'}}" alt="" />     </li>
  </ul>
</div>

Can someone please help me? Driving me nuts because jquery is running ok I guess.

Upvotes: 1

Views: 187

Answers (1)

coderatlarge
coderatlarge

Reputation: 649

well after whacking my head for 1 month I realized that the culprit was a

@media screen and (max-width: 500px) {
        -webkit-transform:none;}

setting in a totally unrelated css file that was preventing the slider in portrait mode. In landscape mode, the viewport width was more than 500px and therefore the slider was working fine. I am sure I am missing a best practice on preventing such things.

Upvotes: 1

Related Questions