Responsive blog preview card using Flexbox and Styled Components
Design comparison
Solution retrospective
I'm most proud of the clean and responsive layout for the blog preview card. Next time, I aim to enhance the card's user-friendliness, particularly for users relying on screen readers.
What challenges did you encounter, and how did you overcome them?I faced a challenge in aligning elements within the blog card, especially when centering the author’s section and placing the image side by side. At first, I had difficulty positioning these elements, but by using Flexbox properties like justify-content and align-items, I was able to position them correctly.
What specific areas of your project would you like help with?I would like help on how to enhance the responsiveness of my project. Specifically, I'm looking for tips on using media queries effectively, optimizing layout adjustments for different screen sizes, and ensuring that all elements are accessible and visually appealing across devices.
Community feedback
- @hannibal1631Posted about 1 month ago
First of all, great job on the design. It's 95% similar to the original one which is a great sign. Now as you're talking about responsiveness using media queries, just keep one thing in mind. When you write media query, you don't have to write everything from scratch. Almost all properties will be followed on smaller screen. Just adjust some properties which are necessary, which in most cases are width of the container, font-size, flex-direction etc. If you would like to discuss more, let's connect through discord.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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