mercf / css3-media-queries-tutorial

Repository for a web design course project.

CSS3-Media-Queries-Tutorial

Summary

A repository for a web design course project. This is an Eclipse static web project.

Based on the tutorial at webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries.

This has been tested with Mozilla Firefox (14.0.1) and Google Chrome (24.0.1312.68).

Browser Compatibility

Google Chrome users will need to run Chrome with the allow-file-access-from-files flag for the scripts to work correctly.

Linux:

$ google-chrome --allow-file-access-from-files

Windows:

Create a shortcut to Google Chrome's chrome.exe with this filepath: <path-to-chrome.exe> --allow-file-access-from-files

The .html files

The /WebContent directory contains subdirectories /less, /less_css, and /css. The files demo-step1.html, final.html, and three_column.html refer to CSS files in /css. The file three_column_less_css.html refers to files in less_css generated by lessc. A less compiler is required to compile the .less files in /less to produce the files in less_css.

three_column_less_css.html is a draft. The lessc compiled style_three_column_out.css does not replicate style_three_column.css correctly at present.