What it does:

Context Breakpoint brings CSS media queries to the server.
By using Context and Breakpoints (which will be moved into the core in Drupal 8) you can alter the page based on the visitors screen resolution, browser window size, or aspect ratio.

A new context condition "Breakpoint" is available after install.

Example use cases:

  • Use a special narrow template for screens smaller than 800px in width.
  • Add an additional block when the browser window is higher than 600px
  • .....

Adaping to resolution should mostly be done with CSS (and media queries),
but sometimes you just can not do everything you need to in plain CSS, and more extensive changes - like different markup - are required.

IMPORTANT NOTE:
This module detects screen and browser size with Javascript and sets a cookie accordingly.
This means that Javascript and cookies must be enabled.
Also, after changing the browser size, a reload will obviously be required
for the changes to show up. For this purpose, you can use the auto-reload feature (see below).

Supported media queries

  • (min/max-)height
  • (min/max-)width
  • (min/max-)screen-height
  • (min/max-)screen-width
  • (min/max-)aspect-ratio
  • (min/max-)device-aspect-ratio

Auto-reload

When configuring the context condition, you can enable the "Auto-reload" feature.
When active, the page will automatically refresh when a breakpoint becomes active or inactive. This is as responsive as this technique can get.

Installation:

Nothing special here, just place it in your sites/all/modules directory and enable it.
Dependencies: Context, Ctools (for context).

How to use:

See the README.txt under Configuration for setup instructions.

Caching implications

This module has implications for using the Drupal page cache.
Check the README.txt under CACHING for a detailed explanation and possible solutions.

A more detailed explanation is in the README.

Project Information

Downloads