Blog card preview using CSS flexbox, @media and a variables
Design comparison
Solution retrospective
I feel like setting the main frame of the card as a flexbox, and utilising flex alignment settings along with padding makes it easy to add the various inner elemements with minimal CSS adjustments to them.
I also set up all the colours and the base paragraph font as variables. I then used calc() to adjust font across elements based on the base paragraph variable rather than using rem or %. I felt this approach makes it easier to adjust on a relative basis to the base paragraph.
What challenges did you encounter, and how did you overcome them?No major challenge. Variable fonts were new, so it was a learning experience to find out how to reference them in CSS.
What specific areas of your project would you like help with?I was wondering about good practices on images within containers.
In this exercise I kept default content box settings and I use a width and padding on the container. It was then easy to specify the same width for the image element.
But from a responsiveness point of view, is this the best way to approach images. Specifying width in px of image and container, or is there a better way to do this. For example I remember there is object-fit which can crop an image to fit a container, would this have been better?
Community feedback
- @PropowershellPosted about 2 months ago
Your approach works, but for better responsiveness, it's typically more efficient to avoid setting widths in
px, as this can make scaling difficult on different screen sizes. Instead, using percentage-based widths or relative units likevw(viewport width) is more flexible. For instance:css .container { width: 100%; padding: 20px; }
img { width: 100%; height: auto; }
This allows the image to scale with its container while maintaining its aspect ratio, making it responsive without the need for fixed pixel values. Regarding `object-fit`, it's indeed a useful property when you want the image to fill a container while maintaining its aspect ratio or when you want to crop the image. For example, using `object-fit: cover` will ensure the image fills the container, potentially cropping it, while `object-fit: contain` will maintain the entire image within the container. So, for best practices: - Use fluid layouts (percentages or `vw` for widths). - Use `object-fit` when you need images to behave more flexibly in varying container sizes. - Consider setting `max-width` to prevent oversized images on larger screens.Marked as helpful0@dearestalexanderPosted about 2 months ago@Propowershell Thanks for the feedback, I got really good feedback on a later challenge and understand these points now, but haven't gone back to retroactively fix this one yet.
0@PropowershellPosted about 2 months ago@dearestalexander Ok, that's great, the card looks perfect though 👍🏽
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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