Home / Blog

Add new comment

Posted on by Heather James.

Hello Neil!

The Breakpoints you set in the .info file define the measurements used for the media queries. With Media queries you can set specific CSS for media types such as screen or print. Then you can set CSS for media features such as "width".

The Breakpoints module used the word "breakpoint" to clarify that you can only define widths, as far as I know. But the module could have been called "Media Query Width Feature Setting Module" and it would have been correct, but hard to remember.

The magic of the Picture module happens with JavaScript which checks the width of the browser, and then loads and displays the appropriate image. If there is no JavaScript enabled, the "fallback" option appears in the "no script" tag.

You should probably give the Picture module a go, and check out the Markup that gets generated. You'll notice that there are span tags with special attributes prefixed by "data-". This hides the sources from your browser until the script is prompted to display the different image.

But yeah, try out the Picture module and check out the markup.

Here's a screenshot of the markup:
http://www.evernote.com/sh ard/s22/sh/f8031dc5-b6d3-4d13-a76d-c2ca3b7bb24...

More information about text formats

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.