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 Stephen Hancocks
Stephen Hancocks
9,271 Points

Alternative to Picture element

I've completed the HTML Responsive images course by Nick Pettit and tried to implement it into my own, simple, 'Coming Soon' site.

I want the correct image to be displayed when viewed on a desktop/laptop [full screen landscape image] and a smartphone / tablet [full screen portrait image].

Using the picture element I've got it to work but only on Google Chrome on my iMac The site is on www.louisehancocks.co.uk

The picture element isn't supported by Safari and that's what most people use on their iPhone / iPad and it doesn't seem to be supported by the mobile version of Chrome either.

What is the alternative method? Do I need to use more media queries?

Any help would be appreciated.

Erik Nuber
Erik Nuber
20,629 Points

Outside of the photo being relatively large, the image works on all the browsers I tried. (Chrome, Safari, Firefox) It also works from both my desktop and ipad. So assume you either figured it out, or it just took a few minutes to get to the servers.

If you want to size your photo without CSS you can always add in 

<img src="your_photo.jpg" alt="alt_text" style="width: (% or px); height: (% or px);">

you may want to use something like this as well in your head section of the HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1">

The line above is important especially for viewing on different screen sizes. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Stephen Hancocks
Stephen Hancocks
9,271 Points

Hi Erik, thanks for your reply. I may not have written the question correctly. I am still have an issue with my site.

The image resizes fine when the browser is resized. The issue I'm having is that the ideal scenario is only visible through Google Chrome on a desktop. You'll see that as the browser gets smaller the art direction of the image changes and it's a full screen portrait image.

I went to this site http://caniuse.com/#feat=picture and saw that the picture element isn't supported in Safari. As our business is primarily marketed through facebook I want the site to look perfect on smartphones. I have changed the code slightly to default to the portrait image for this purpose, but it just looks wrong when viewed on Safari on a desktop / laptop as it doesn't show the landscape image.

I'm still stuck as to a way to set different srcsets based on media queries without using the picture element.

2 Answers

Stephen Hancocks
Stephen Hancocks
9,271 Points

Erik, I thought I'd update this thread as I've figured out the issue. I rewatched the video series again today and couldn't believe what I'd missed. I was trying to find a work around to the picture element not being supported by Safari and had forgotten [or not properly understood] the video on the picturefill javascript file that adds this functionality. I've added it to my site and now all works as expected.

Thanks for trying to help me out.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I didn't resize the windows before but in doing so, can see doing so makes the image behave oddly. You definitely need to add some media queries to the code. That will allow you to correctly display your image.

If you aren't already using a .CSS file, you will need to add a separate file and call it. Not sure if you've looked at CSS yet.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

or call it in your head via the style tag.

<style>
@media (max-width: 480px) {
    background: url(your_image.gif); /*the image you are trying to set as the background*/
    background-size: 100%;  /*can use this in % or px for example */
    background-repeat: no-repeat; /*makes sure the image doesn't repeat itself*/
}

@media (max-width: 768px) {
    background: url(your_image.gif); /*the image you are trying to set as the background*/
    background-size: 100%;  /*can use this in % or px for example */
    background-repeat: no-repeat; /*makes sure the image doesn't repeat itself*/
}

@media screen and (orientation:portrait) {
   /* Portrait styles here good for tablet */
}

@media screen and (orientation:landscape) {
   /* Landscape styles here good for tablet */
}
</style>
</head>

Still not sure if this will help with your issue but, media queries are definitely what help make a site responsive. I would also add the meta tag I mentioned the first answer into your head of the html. That and check out the videos here on media queries to hopefully make it make more sense.

There is a page for responsive web design on w3school site and, it's pretty informative as well

http://www.w3schools.com/html/html_responsive.asp