Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Art Direction with the Picture Element The Picture Element

Maureen O'Neal
Maureen O'Neal
12,930 Points
Posted by Maureen O'Neal
Maureen O'Neal
12,930 Points

what am I getting wrong? I have it exactly as is shown in the tape, the orientation is to be landscape, right?

I understand what I'm doing, so I don't understand why I'm not passing! It is easy, the media orientation for the picture element, on the first source, the first problem, Here is my code:

index.html 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Images</title>
    <link rel="stylesheet" href="normalize.css" />
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main.css" />
    <script src="picturefill.min.js" async></script>
  </head>
  <body>

    <div class="wrapper">

      <picture>
        <source
          media="(orientation:landscape)"
          srcset="banner-large.jpg  2048w,
                  banner-medium.jpg 1400w,
                  banner-small.jpg  800w"
          />
        <source

          srcset="banner-square-large.jpg  1000w,
                  banner-square-medium.jpg 800w"
          />
        <img
          src="banner-medium.jpg"
          alt="Photograph of Nick Pettit in front of trees."
          class="banner-image"
          />
      </picture>

      <div class="content-block">

        <div class="profile-description">

          <div class="profile-image">
            <img
              srcset="photo-@2x.jpg 2x,
                      photo-@1x.jpg 1x"
              src="photo-@1x.jpg"
              alt="Photograph of a flower."
              />
          </div>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere nec quam vitae aliquet. Etiam sodales feugiat gravida. Donec tincidunt facilisis arcu, ut sagittis eros iaculis a. Nam fringilla erat id lorem pellentesque ornare. Curabitur sed interdum tellus. Etiam imperdiet, dui id condimentum ullamcorper, lectus nibh venenatis lectus, id ullamcorper nibh nibh id dolor. Suspendisse tempor turpis vel commodo consequat. Phasellus at posuere velit. Sed vehicula lacinia mauris sit amet mollis. Etiam semper leo blandit massa molestie congue. Sed ac purus ipsum.</p>
          <p>Integer dignissim ultrices lacus tincidunt aliquet. Cras maximus eleifend felis. Pellentesque in nulla condimentum, aliquet orci sed, gravida velit. Pellentesque mattis ex at magna consectetur porta. Aenean eget volutpat urna. Maecenas sed nisl sit amet tortor vulputate vulputate non nec elit. Mauris bibendum erat nec purus finibus, eget molestie dolor placerat. Pellentesque at massa et ligula sagittis gravida. Nunc libero dolor, luctus ac imperdiet ac, suscipit nec nibh. Ut non diam urna.</p>
          <p>Cras blandit at urna sagittis consequat. Integer tristique mollis metus, at varius leo imperdiet vitae. Donec a porta tellus. Sed sit amet euismod urna. Vestibulum varius urna vitae odio eleifend, et consectetur felis congue. Sed vulputate mattis mauris, eget euismod ante condimentum nec. Integer augue ex, pharetra vitae rutrum a, tristique vitae mauris.</p>
        </div>

      </div>

    </div>


  </body>
</html>

2 Answers

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Maureen,

You need to remove backslash inside Source element. 

        <source
          media="(orientation: landscape)"
          srcset="banner-large.jpg  2048w,
                  banner-medium.jpg 1400w,
                  banner-small.jpg  800w">
        <source
          srcset="banner-square-large.jpg  1000w,
                  banner-square-medium.jpg 800w">

More details on Mozilla Document

Hope that helps. :)

Maureen O'Neal
Maureen O'Neal
12,930 Points
Maureen O'Neal
Maureen O'Neal
12,930 Points

but doesn't the source tag need to be closed with an />?

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

well, not required. These elements are known as 'self closing tags' including br, col, command, embed, hr, img, link, meta, source, track, without backslash. Most importantly we should always check documentation to verify it.

Maureen O'Neal
Maureen O'Neal
12,930 Points
Maureen O'Neal
Maureen O'Neal
12,930 Points

You're right, the mozilla doc. shows you don't need it, but it STILL doesn't work.

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Found another issue, I see you put media="(orientation:landscape)"

You have to put extra little space in between orientation and landscape. 

media="(orientation: landscape)"

wink

Maureen O'Neal
Maureen O'Neal
12,930 Points
Maureen O'Neal
Maureen O'Neal
12,930 Points

Thank you, it WAS the spacing! Thanks again!