I don't understand why I couldn't use the align-items and justify-content to center my card. If I use it, my card would just stick to the top of the page so I had to use a margin-top of 10% instead, which, I imagine, isn't the ideal solution.
Latest solutions
Blog preview card solution using Flexbox
Submitted 4 months agoI would appreciate feedback on:
-
Best practices for responsive typography - I'd like to know if there are better ways to handle font-size changes between mobile and desktop views without relying heavily on media queries.
-
CSS organization - While my code works, I'd love to hear suggestions about making it more maintainable and following industry best practices.
-
Latest comments
- @Sora-W-ErdnaseWhat specific areas of your project would you like help with?@leventsoner
Hello, great job.
To improve the centering of your card, consider using min-height: 100vh; on the
<main>
element. This will allow align-items: center; and justify-content: center; to work effectively, centering your card both vertically and horizontally within the viewport. Like this:main { display: flex; flex-direction: column; align-items: center; justify-content:center; min-height: 100vh; }
Overall, I think you are on the right track, keep up the great work!
- @anagonzalez0324@leventsoner
Thank you for sharing your solution! I noticed a few things that might help improve the component:
- The vertical centering could be improved using Flexbox, which would make it more consistent across different screen sizes
- The image border-radius appears to be affected by the padding. Moving the padding to the container would help maintain the rounded corners
- The responsive design works well, though you might consider adjusting the breakpoint to 375px for this specific component
Overall, good job on implementing the design!Let me know if you'd like specific examples of any of these suggestions.