Wookmark jQuery plugin does not work on the iPhone! [solved]

I had such a problem. Annoyed me a bit.

Then I noticed that the problem is list items’ width!

Example

CSS:

#wookmark_blog_posts_list > li {
  width: 308px;
}

jQuery:

$(document).ready(function(){
  // Prepare layout options.
  var wookmark_options = {
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('#wookmark_blog_posts_list_wrapper'), // Optional, used for some extra CSS styling
    offset: 20, // Optional, the distance between grid items
    itemWidth: 308 // Optional, the width of a grid item
  };

  // Get a reference to your grid items.
  var $wookmark_handler = $('#wookmark_blog_posts_list > li');

  // Call the layout function.
  $wookmark_handler.wookmark(wookmark_options);
});

Fix

Css:

#wookmark_blog_posts_list > li {
  width: 308px;
}

@media (max-width: 320px) {
  #wookmark_blog_posts_list > li { width: 250px; }
}

jQuery:

$(document).ready(function(){
  // Prepare layout options.
  var wookmark_options = {
    autoResize: true, // This will auto-update the layout when the browser window is resized.
    container: $('#wookmark_blog_posts_list_wrapper'), // Optional, used for some extra CSS styling
    offset: 20, // Optional, the distance between grid items
    itemWidth: 308 // Optional, the width of a grid item
  };

  if( $(window).width() <= 320 ) {
    wookmark_options.itemWidth = 250;
  }

  // Get a reference to your grid items.
  var $wookmark_handler = $('#wookmark_blog_posts_list > li');

  // Call the layout function.
  $wookmark_handler.wookmark(wookmark_options);
});

Hope this helps :)