diff --git a/imagematrix.module b/imagematrix.module
index 8a702df..43dc861 100644
--- a/imagematrix.module
+++ b/imagematrix.module
@@ -26,6 +26,30 @@ require_once IMAGEMATRIX_PATH . '/imagematrix.field.inc';
 require_once IMAGEMATRIX_PATH . '/theme/theme.inc';
 
 /**
+ * Implements hook_init().
+ */
+function imagematrix_init() {
+  // According to the documentation of hook_init() it should not be used to
+  // load JS or CSS. The CSS case has been moved to the info file. But the JS is
+  // here by intention, as we want it inline to prevent wait time while loading
+  // the script
+
+  // No need for drupal behaviours
+  $js = "document.cookie = 'imagematrix=' + jQuery(window).width() + '; path=/';";
+  drupal_add_js($js,
+    // First-come, first-served
+    array(
+      'type' => 'inline',
+      'scope' => 'header',
+      'group' => JS_LIBRARY,
+      'every_page' => TRUE,
+      'weight' => 1,
+    )
+  );
+  drupal_add_js(drupal_get_path('module', 'imagematrix') . '/imagematrix.js', 'file');
+}
+
+/**
  * Implements hook_menu().
  */
 function imagematrix_menu() {
@@ -37,6 +61,14 @@ function imagematrix_menu() {
     'access arguments' => array('access content'),
     'type' => MENU_CALLBACK,
   );
+  $items['admin/config/media/imagematrix'] = array(
+    'title' => 'Imagematrix Breakpoints',
+    'description' => 'Change the number of configurable breakpoints available in image matrix block display settings.',
+    'page callback' => 'drupal_get_form',
+    'page arguments' => array('imagematrix_settings_form'),
+    'access arguments' => array('administer site configuration'),
+    'file' => 'imagematrix.admin.inc',
+  );
   return $items;
 }
 
@@ -84,6 +116,10 @@ function imagematrix_theme() {
         'images' => array(),
         'settings' => array(),
       ),
+    'imagematrix_adaptivestyles_form' => array(
+      'render element' => 'styles',
+      'file' => 'imagematrix.admin.inc',
+      ),
     ),
   );
 }
diff --git a/theme/theme.inc b/theme/theme.inc
index 5b1dfab..bfb3075 100644
--- a/theme/theme.inc
+++ b/theme/theme.inc
@@ -21,7 +21,9 @@ function template_preprocess_views_view_imagematrix(&$variables) {
 
   // Force required size of each block with inline style.
   $block_styles = array();
-  $block_styles[] = 'width: ' . $options['block_width'] . 'px';
+
+  $client_width = imagematrix_adaptive_block($options);
+  $block_styles[] = 'width: ' . $client_width . 'px';
   if (!empty($options['block_height'])) {
     $block_styles[] = 'height: ' . $options['block_height'] . 'px';
   }
@@ -171,6 +173,26 @@ function imagematrix_preprocess_views_view_field(&$variables) {
   }
 }
 
+function imagematrix_adaptive_block($options) {
+  $styles = $options['styles'];
+  $client_width = $options['block_width']; // default
+  if (isset($_COOKIE['imagematrix'])) {
+    if (is_numeric($_COOKIE['imagematrix'])) {
+      for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+        if (is_numeric($styles['breakpoint_' . $i])) {
+          if ($_COOKIE['imagematrix'] >= $styles['breakpoint_' . $i]) {
+            $client_width = $options['block_width'] * $styles['style_' . $i] / 100;
+          }
+        }
+      }
+    } else {
+      setcookie("imagematrix", "", time() -1); // delete the mangled cookie
+    }
+  }
+  //echo $client_width . " - ". $_COOKIE['imagematrix'];
+  return $client_width;
+}
+
 function imagematrix_preprocess_field(&$variables) {
   if (
     isset($variables['element'])
diff --git a/views/views_plugin_style_imagematrix.inc b/views/views_plugin_style_imagematrix.inc
index 193d604..2c18e38 100644
--- a/views/views_plugin_style_imagematrix.inc
+++ b/views/views_plugin_style_imagematrix.inc
@@ -17,7 +17,7 @@ class views_plugin_style_imagematrix extends views_plugin_style {
    */
   function option_definition() {
     $options = array();
-    $options['block_width'] = array('default' => 600);
+    $options['block_width'] = array('default' => 50);
     $options['block_height'] = array('default' => NULL);
     $options['block_images_count'] = array('default' => 7);
     $options['image_padding'] = array('default' => 3);
@@ -38,9 +38,36 @@ class views_plugin_style_imagematrix extends views_plugin_style {
       '#default_value' => $this->options['block_width'],
       '#required' => TRUE,
       '#element_validate' => array('views_element_validate_integer'),
-      '#field_suffix' => 'px',
+      '#field_suffix' => '%',
       '#size' => 5,
     );
+    $form['styles'] = array(
+      '#tree' => TRUE,
+      '#theme' => 'imagematrix_adaptivestyles_form',
+    );
+
+    for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+      $form['styles']['breakpoint_' . $i] = array(
+        '#title' => t('Client width breakpoint @key', array('@key' => $i)),
+        '#title_display' => 'invisible',
+        '#type' => 'textfield',
+        '#default_value' => isset($this->options['styles']['breakpoint_' . $i]) ? $this->options['styles']['breakpoint_' . $i] : '',
+        '#maxlength' => 5,
+        '#size' => 5,
+        '#field_suffix' => 'px',
+        '#element_validate' => array('element_validate_integer_positive'),
+      );
+      $form['styles']['style_' . $i] = array(
+        '#title' => t('Block width for breakpoint @key', array('@key' => $i)),
+        '#title_display' => 'invisible',
+        '#type' => 'textfield',
+        '#default_value' => isset($this->options['styles']['style_' . $i]) ? $this->options['styles']['style_' . $i] : '',
+        '#maxlength' => 5,
+        '#size' => 5,
+        '#field_suffix' => 'px',
+        '#element_validate' => array('element_validate_integer_positive'),
+      );
+    }
     $form['block_height'] = array(
       '#type' => 'textfield',
       '#title' => t('Height of one block'),
@@ -193,9 +220,11 @@ class views_plugin_style_imagematrix extends views_plugin_style {
       $this->view->result = $new_result;
     }
 
+    $client_width = imagematrix_adaptive_block($this->view->style_options);
+
     // Settings for MagazineLayout class.
     $mag_options = array(
-      'block_width' => $this->view->style_options['block_width'],
+      'block_width' => $client_width,
       'block_height' => $this->view->style_options['block_height'],
       'block_images_count' => $this->view->style_options['block_images_count'],
       'image_padding' => $this->view->style_options['image_padding'],