The solution follows the design for the most part and is responsive on different screen sizes. However, the card itself isn't centered vertically.
The easiest improvement would be to add semantic HTML, using an <article> tag for your wrapper, and a <figure> tag for the images.
When using max-width, I usually set the max width of parent elements and the content within that element dictates the width up to a certain point.
I found this video to be helpful:
https://www.youtube.com/watch?v=x4u1yp3Msao&t=923s
Marked as helpful
@Mickellg
Posted
@222sucram Are you suggesting I use <figure> tags in order to set everything under as the fig caption? Why is the reasoning and use cases behind your reasoning?
I'll be sure to take a look at this video!!!
@Mickellg In this case I think a figure tag is suitable, but you can also use an <article> tag
The reasoning and use cases for using Semantic HTML is for accessibility purposes as well as SEO. While you the developer may know that a div is supposed to be a header and another div is the footer, the browser doesn't recognize this.
Whereas, using a <header> or <footer> tag; site readers for visually impaired users can understand the structure of the page. The same applies to SEO. A site that uses semantic tags will perform better on search engines.
I used the following link as reference:
https://www.semrush.com/blog/semantic-html5-guide/#semantic-html-tips-&-best-practices
Hope this helps.
Marked as helpful
