Responsive blog preview card using plain HTML CSS
Design comparison
Solution retrospective
The challenge I had was with the SVG. I was having blocks of white space on top and bottom. On css-tricks.com and article by Amelia Bellamy was very helpful in understanding SVG files. Learned a great deal. Unfortunately I was still left with my problem. Finally my next go to source of information on CSS, Kevin Powell's youtube channel, got me the solution. The actual video is entitled "How to use CSS object-fit to control your images". So this CSS property [object-fit] removed the white space and scaled the SVG file to fit the 200px I set on the height. This height is from the figma file.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord