Media query – demo of min-width,
Instructions & Explanation

This refers to this demo page.



About minimum width (min-width)

In the context of media queries the term minimum means the following:

The stacking order of media queries can have an effect

Dreamweaver users:

Experiment with the VMQ interface above Live View.

  1. Create a new HTML file in Dreamweaver
  2. Click in Code view.
  3. Press Ctrl-A/Cmd-A to select all of the code.
  4. Delete it.
  5. View the source code for this page.
  6. Press Ctrl-A/Cmd-A to select all of the code.
  7. Press Ctrl-C/Cmd-C to copy all of the code.
  8. Click in Code view in Dreamweaver (it ought to be empty).
  9. Press Ctrl-V/Cmd-V to paste the copied code.
  10. Use Live View and the Visual Media Query bars to view, modify, and add to the existing media queries. You can also modify them in CSS Designer.
  11. Have fun!