@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
- To properly center your content to your page, you will want to add the following to your
Body
Element (this method uses CSS Grid):
body {
min-height: 100vh;
display: grid;
place-content: center;
}
More Info:📚
[Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]
- The
figure
andfigcaption
are not needed for this challenge.
- This challenges requires the use of two images 🎑 for different breakpoints. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
- Along with a blank
alt tag
your “image” should also have aaria-hidden=“true”
to fully hide it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful
@9dorgham
Posted
@vcarames Thank you, your suggestions completely helpful as I think the <picture> element is like <img> it just gives us more capabilities to apply accessibility on our images.