Full responsice Drupal theme

We've received this project from our partners - Recover Website. The website was in development stage, based on Drupal CMS. We've made a custom full responsive theme for it.

First of all we've added viewport meta tag the theme's base template called html. tpl. php.

Then we've specified breakpoints and corresponding CSS files with those media queries in theme's .info file and added Breakpoints module to the project. Each CSS file was responsible for a specific device (mobile, tablet, laptop and so on).

We've specified wrapper widths for each device (breakpoint). Wrapper's width should be a bit smaller than the minimal value of media query, e.g. it the media query is "(min-width: 1024px) and (max-width: 1365px)" the wrapper's width should be smaller than 1024px - 1000px is normal.

We've added a responsive menu module, which integrates a JS for opening horizontal menu using a toggler in small devices.

The front page has grid sections with 3 and 4 columns of images. The most important part is making images responsive. We've used picture tags and made separate image styles (image resizing plugin in Drupal called image styles) for each breakepoint (media query). Drupal's picture module is very helpful for this task. Also, we've added floating and make a single column section for a smaller devices.

If the theme has functionality to generate picture tags instead of regular img tags, you can call it a full responsive theme.

In internal pages we've used JuiceBox JS library for the galleries. It has fullscreen mode in mobile devices and reacts to swiping event to change the active image.

For inline images in content section we've added fitting CSS rules to prevent overflow from wrapper and horizontal scrollbar.