Snehamoy Bag• 600
@snehamoybag
Posted
Hi @edivaldojrdev,
Great job completing this challenge! 👏
Answering to your question,
since you have only set the img {height = 100%}, it only stretched the image that is inside of your <img> tag. The mobile version of the image is actually inside the <source> tag within the picture.
Therefore, in order to target both img and source tag you can use this selector :
picture > * {
height: 100%;
}
This (picture > * { }) will target all element that is a direct child of the <picture> element. 😄
Also, I just noticed that you are using order property to shift the layout 😯 as a disclaimer I'd recommend you not use it often, as it can mess up the actual order of html document which can cause major confusion to someone using an assertive technology 😅
0
