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

Posted by Brian Bouquet
.a{fill-rule:evenodd;}techdegree
Brian Bouquet
Full Stack JavaScript Techdegree Student 6,546 Points

Is media="(orientation: landscape)" deprecated in newer versions of Chrome?

I wasn't able to replicate the responsive effect in this video for portrait views. Instead of switching to the square image, the wide banner showed instead.

1 Answer

Christian Fynbo
seal-mask
.a{fill-rule:evenodd;}techdegree
Christian Fynbo
Full Stack JavaScript Techdegree Student 2,910 Points
Christian Fynbo
.a{fill-rule:evenodd;}techdegree
Christian Fynbo
Full Stack JavaScript Techdegree Student 2,910 Points

orientation has full support in terms of browser compatibility. It is written without quotations and starting with an at(@) sign, like so:

@media (orientation: landscape) {
  ...
}

More here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Brian Bouquet
.a{fill-rule:evenodd;}techdegree
Brian Bouquet
Full Stack JavaScript Techdegree Student 6,546 Points

Thanks for your quick response, Christian Fynbo. I was wondering about support in HTML using <picture> and <source> tags. Like so:

<picture>
        <source 
          media="(orientation: landscape)"
          srcset="img/banner-large.jpg 2048w,
                  img/banner-medium.jpg 1400w,
                  img/banner-small.jpg 800w"
        />
        <source 
          srcset="img/banner-square-large.jpg 1300w,
                  img/banner-square-medium.jpg 900w"
        />
        <img 
          src="img/banner-medium.jpg"
          alt="Nick Pettit in front of trees."
          class="banner-image"
        />
      </picture>

Referenced in this video: https://teamtreehouse.com/library/responsive-images/art-direction-with-the-picture-element/the-picture-element

My code didn't work to show the banner-square images when I viewed in portrait views.