Responsive Blog Preview Card

What are you most proud of, and what would you do differently next time?

Throughout the development of this project, I gained proficiency in implementing media queries to achieve responsive web design, ensuring the layout adapts effectively across different screen sizes. Additionally, I expanded my knowledge of advanced CSS properties, including the use of object-fit to control how images are displayed within containers when their dimensions differ. I also explored the outline and outline-offset properties, leveraging them to create inner borders without affecting the layout. Furthermore, I deepened my understanding of CSS inheritance, enhancing my ability to manage cascading styles efficiently.

What challenges did you encounter, and how did you overcome them?

The most significant challenge I faced was adjusting the aspect ratio of the image for the mobile version. The image either exceeded the container's size or failed to cover 100% of the container's height. To resolve this, I assigned a specific height to the image and applied the object-fit property with the value set to cover. This effectively ensured that the image maintained its aspect ratio while fully covering the container without overflow, successfully addressing the issue.

What specific areas of your project would you like help with?

Any feedback would be very appreciated.