In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
Great first pass at this! 🔥🔥🔥🎉🎉🎉 It looks like you have the large version of the picture at small screen sizes, and the small version of the picture at large screen sizes. Right click on the image and choose "open image in new tab" to see the URL for the image, and you'll see what I mean. Check Jade's answer below for an example that is working well. Thanks for sharing!
🔥🔥🔥🎉🎉🎉 Great start! Looks like you have the images in the right order, but your media queries aren't quite right. Your first one is for print (so nothing happens), the second for a range that isn't quite formatted correctly. Drop the max-width on that and you should be OK. The last one is for a mid-width, so that isn't working either. On the dropdown arrow to the upper right in the HTML box, look for "analyze HTML" - this might help you identify mistakes. Thanks for sharing -- you have done GREAT work this month!
OK great -- two things. First, no <picture>? That might be why this isn't working. Second - review those comments on the media queries. Your queries don't quite match for what was asked in the comments. But you've got a great start, and valid HTML for what's here! 🔥🔥🔥🎉🎉🎉
🔥🔥🔥🎉🎉🎉 Good start on this! Rather than specifying a range of widths for your middle media query, consider just having a min-width. It should be overridden by the next media query down. The <img> tag might be best suited for the mobile version of the image since this is the default. Not sure it would override these pictures for the largest format the way you have it set up now -- I see the change around 768px, but not sure I see it at 991px?
I tried to get Eric Portis's example to work but couldn't get it. Is that not implemented yet? This works: https://codepen.io/romola/pen/LYybJQX
The picture code looks great and works well. I think srcset and sizes are well supported -- see https://caniuse.com/?search=sizes
https://codepen.io/kajal-28/pen/xxqWKRp
🌈🌈🌈🦄🦄🦄 woo woo! Looking great!
https://codepen.io/kldickenson/pen/jOBPNQE
🌈🌈🌈🦄🦄🦄 Looking great! Thanks for sharing!
https://codepen.io/kadie7/pen/MWJMEpQ?editors=1010
Great first pass at this! 🔥🔥🔥🎉🎉🎉 It looks like you have the large version of the picture at small screen sizes, and the small version of the picture at large screen sizes. Right click on the image and choose "open image in new tab" to see the URL for the image, and you'll see what I mean. Check Jade's answer below for an example that is working well. Thanks for sharing!
https://codepen.io/jarchaff/pen/jOyovJB?editors=1000
I can't seem to get the middle-sized image to appear clearly.
🔥🔥🔥🎉🎉🎉 Looks like you have two lg images -- change that middle one to md and it will work. Great work!
Oh, I totally missed that! Thank you!
https://codepen.io/kelsey-van-ert/pen/gOgJjoK a day late
🔥🔥🔥🎉🎉🎉 Great start! Looks like you have the images in the right order, but your media queries aren't quite right. Your first one is for print (so nothing happens), the second for a range that isn't quite formatted correctly. Drop the max-width on that and you should be OK. The last one is for a mid-width, so that isn't working either. On the dropdown arrow to the upper right in the HTML box, look for "analyze HTML" - this might help you identify mistakes. Thanks for sharing -- you have done GREAT work this month!
Hi, I was unable to load the photo but this is my codepen :) https://codepen.io/laucrisw/pen/yLgWLvy
OK great -- two things. First, no <picture>? That might be why this isn't working. Second - review those comments on the media queries. Your queries don't quite match for what was asked in the comments. But you've got a great start, and valid HTML for what's here! 🔥🔥🔥🎉🎉🎉
🔥🔥🔥🎉🎉🎉 Good start on this! Rather than specifying a range of widths for your middle media query, consider just having a min-width. It should be overridden by the next media query down. The <img> tag might be best suited for the mobile version of the image since this is the default. Not sure it would override these pictures for the largest format the way you have it set up now -- I see the change around 768px, but not sure I see it at 991px?