Responsive Class Values

Three available responsive class values for images.

  • no-handheld - The original quick fix. This removes the image at screen widths below 1,000 pixels (tablets and smaller). Useful for busy layouts with lots of images that would be problematic for small screens. (sets... display: none;)
     
  • sub600-full-width - New! - Will force the tagged image to display scaled to the full available width when the screen is 600 pixels or less. (sets... width: 100%; height: auto;)
      
  • sub600-half-width - New! - Will force the tagged image to display scaled to the half of the available width when the screen is 600 pixels or less. (sets... width: 50%; height: auto;)

Sample Usage

no-handheld
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus in hendrerit gravida rutrum quisque non tellus. Pellentesque nec nam aliquam sem et tortor consequat. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Adipiscing elit duis tristique sollicitudin nibh sit amet.

Quis risus sed vulputate odio ut enim blandit volutpat. Sed velit dignissim sodales ut eu. Risus viverra adipiscing at in tellus. Rhoncus urna neque viverra justo. At tempor commodo ullamcorper a. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Tellus molestie nunc non blandit. Lacinia quis vel eros donec ac odio tempor orci dapibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam.

sub600-full-width
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus in hendrerit gravida rutrum quisque non tellus. Pellentesque nec nam aliquam sem et tortor consequat. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Adipiscing elit duis tristique sollicitudin nibh sit amet.

Quis risus sed vulputate odio ut enim blandit volutpat. Sed velit dignissim sodales ut eu. Risus viverra adipiscing at in tellus. Rhoncus urna neque viverra justo. At tempor commodo ullamcorper a. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Tellus molestie nunc non blandit. Lacinia quis vel eros donec ac odio tempor orci dapibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam.

sub600-half-width
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus in hendrerit gravida rutrum quisque non tellus. Pellentesque nec nam aliquam sem et tortor consequat. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Adipiscing elit duis tristique sollicitudin nibh sit amet.

Quis risus sed vulputate odio ut enim blandit volutpat. Sed velit dignissim sodales ut eu. Risus viverra adipiscing at in tellus. Rhoncus urna neque viverra justo. At tempor commodo ullamcorper a. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Tellus molestie nunc non blandit. Lacinia quis vel eros donec ac odio tempor orci dapibus. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam.