diff --git a/imagematrix.admin.inc b/imagematrix.admin.inc
new file mode 100644
index 0000000..d5252fd
--- /dev/null
+++ b/imagematrix.admin.inc
@@ -0,0 +1,36 @@
+<?php
+/**
+ * @file
+ * Administrative interface for the adaptive imagematrix module.
+ */
+
+/**
+ * Builds the module's settings form.
+ */
+function imagematrix_settings_form() {
+  $form['imagematrix_breakpoint_count'] = array(
+    '#title' => t('Number of breakpoints'),
+    '#type' => 'textfield',
+    '#description' => t('The maximum number of configurable client width breakpoints available in adaptive imagematrix display settings.'),
+    '#size' => 5,
+    '#maxlength' => 3,
+    '#default_value' => variable_get('imagematrix_breakpoint_count', 5),
+    '#element_validate' => array('element_validate_integer_positive'),
+  );
+  return system_settings_form($form);
+}
+
+/**
+ * Renders the styles form in a table.
+ */
+function theme_imagematrix_adaptivestyles_form($variables) {
+  $styles = $variables['styles'];
+
+  // Prepare rows for breakpoint styles.
+  $header = array(t('Client width breakpoint'), t('Block width'));
+  for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+    $rows[] = array(drupal_render($styles['breakpoint_' . $i]), drupal_render($styles['style_' . $i]));
+  }
+
+  return theme('table', array('header' => $header, 'rows' => $rows));
+}
\ No newline at end of file
diff --git a/imagematrix.field.inc b/imagematrix.field.inc
index 7fe9088..76c6eb3 100644
--- a/imagematrix.field.inc
+++ b/imagematrix.field.inc
@@ -14,7 +14,8 @@ function imagematrix_field_formatter_info() {
       'label' => t('Image Matrix'),
       'field types' => array('image', 'media', 'video'),
       'settings' => array(
-        'block_width' => 600,
+        'block_width' => 50,
+        'block_width' => 50,
         'block_height' => NULL,
         'block_images_count' => 7,
         'image_padding' => 3,
@@ -29,6 +30,10 @@ function imagematrix_field_formatter_info() {
       ),
     ),
   );
+  for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+    $formatters['imagematrix']['settings']['styles']['breakpoint_' . $i] = 500;
+    $formatters['imagematrix']['settings']['styles']['style_' . $i] = 50;
+  }
   return $formatters;
 }
 
@@ -52,10 +57,38 @@ function imagematrix_field_formatter_settings_form($field, $instance, $view_mode
       '#default_value' => $settings['block_width'],
       '#required' => TRUE,
       '#element_validate' => array('element_validate_integer_positive'),
-      '#field_suffix' => 'px',
+      '#field_suffix' => '%',
       '#size' => 5,
     );
 
+    $element['styles'] = array(
+      '#tree' => TRUE,
+      '#theme' => 'imagematrix_adaptivestyles_form',
+    );
+
+    for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+      $element['styles']['breakpoint_' . $i] = array(
+        '#title' => t('Client width breakpoint @key', array('@key' => $i)),
+        '#title_display' => 'invisible',
+        '#type' => 'textfield',
+        '#default_value' => isset($settings['styles']['breakpoint_' . $i]) ? $settings['styles']['breakpoint_' . $i] : '',
+        '#maxlength' => 5,
+        '#size' => 5,
+        '#field_suffix' => 'px',
+        '#element_validate' => array('element_validate_integer_positive'),
+      );
+      $element['styles']['style_' . $i] = array(
+        '#title' => t('Block width for breakpoint @key', array('@key' => $i)),
+        '#title_display' => 'invisible',
+        '#type' => 'textfield',
+        '#default_value' => isset($settings['styles']['style_' . $i]) ? $settings['styles']['style_' . $i] : '',
+        '#maxlength' => 5,
+        '#size' => 5,
+        '#field_suffix' => 'px',
+        '#element_validate' => array('element_validate_integer_positive'),
+      );
+    }
+
     $element['block_height'] = array(
       '#type' => 'textfield',
       '#title' => t('Height of one block'),
@@ -195,6 +228,11 @@ function imagematrix_field_formatter_settings_summary($field, $instance, $view_m
 
   $summary[] = t('Block width: !block_width px', array('!block_width' => $settings['block_width']));
 
+  /*for ($i = 1; $i <= variable_get('imagematrix_breakpoint_count', 5); $i++) {
+    $summary[] = t('Client width breakpoint !i: !client_breakpoint px', array('!i' => $i, '!client_breakpoint' => $settings['styles']['breakpoint_' . $i]));
+    $summary[] = t('Block width for breakpoint !i: !block_breakpoint px', array('!i' => $i, '!block_breakpoint' => $settings['styles']['style_' . $i]));
+  }*/
+
   if (!empty($settings['block_heigth'])) {
     $summary[] = t('Block height: !block_height px', array('!block_height' => $settings['block_height']));
   }
@@ -340,10 +378,11 @@ function imagematrix_field_formatter_view($entity_type, $entity, $field, $instan
   }
 
   $settings = $display['settings'];
+  $client_width = imagematrix_adaptive_block($settings);
 
   // Settings for MagazineLayout class.
   $mag_options = array(
-    'block_width' => $settings['block_width'],
+    'block_width' => $client_width,
     'block_height' => $settings['block_height'],
     'block_images_count' => $settings['block_images_count'],
     'image_padding' => $settings['image_padding'],
diff --git a/imagematrix.js b/imagematrix.js
new file mode 100644
index 0000000..3a42f12
--- /dev/null
+++ b/imagematrix.js
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * JavaScript functions for the image matrix module.
+ */
+
+(function ($) {
+  Drupal.behaviors.ImageMatrix = {
+    attach: function(context, settings) {
+      // Replace adapted images on window resize.
+      $(window).resize(function() {
+        document.cookie = 'imagematrix=' + $(window).width() + '; path=/';
+      });
+    }
+  };
+})(jQuery);
\ No newline at end of file
diff --git a/imagematrix.module b/imagematrix.module
index 8a702df..1f5136e 100644
--- a/imagematrix.module
+++ b/imagematrix.module
@@ -25,6 +25,31 @@ require_once IMAGEMATRIX_PATH . '/imagematrix.field.inc';
 // picked up (as its theme implementation lives within  Views module).
 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().
  */
@@ -37,6 +62,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;
 }
 
@@ -85,6 +118,10 @@ function imagematrix_theme() {
         'settings' => array(),
       ),
     ),
+    'imagematrix_adaptivestyles_form' => array(
+      'render element' => 'styles',
+      'file' => 'imagematrix.admin.inc',
+    ),
   );
 }
 
diff --git a/theme/theme.inc b/theme/theme.inc
index 0b2903f..9a62260 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,25 @@ 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
+    }
+  }
+  return $client_width;
+}
+
 function imagematrix_preprocess_field(&$variables) {
   if (
     isset($variables['element'])
@@ -183,7 +204,8 @@ function imagematrix_preprocess_field(&$variables) {
     $variables['classes_array'][] = 'field-imagematrix clearfix';
 
     $styles = array();
-    $styles[] = 'width: ' . $settings['block_width'] . 'px';
+    $client_width = imagematrix_adaptive_block($settings);
+    $styles[] = 'width: ' . $client_width . 'px';
     if (!empty($settings['block_height'])) {
       $styles[] = 'height: ' . $settings['block_height'] . 'px';
     }
diff --git a/views/views_plugin_style_imagematrix.inc b/views/views_plugin_style_imagematrix.inc
index 193d604..6148649 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,37 @@ 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 +221,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'],