Responsive social profile card using Flexbox

Solution retrospective
I'm proud of how polished and responsive the final result turned out. The design remains consistent across different devices, and the interactive states feel smooth and intuitive. Next time, I would experiment with adding subtle animations and transitions to enhance user engagement and explore organizing styles using a preprocessor like SCSS for better scalability.
What challenges did you encounter, and how did you overcome them?Getting the layout to remain centered and well-balanced across screen sizes was a bit tricky. I had to fine-tune padding, margins, and max-widths to ensure visual harmony. I also spent time ensuring that the hover and focus states were accessible and visually distinct. Frequent browser testing and using dev tools helped me iron out these issues.
What specific areas of your project would you like help with?I'd appreciate feedback on:
-
How I structured the layout and responsiveness
-
My use of CSS custom properties and Flexbox
-
Whether there's a more scalable approach to organizing styles in a small component-based layout
-
Any accessibility improvements I might have missed
Please log in to post a comment
Log in with GitHubCommunity feedback
- @CodingWithJiro
First, your site is fantastic for devices with screen width 320px and up.
What I would like to suggest is for your CSS custom variables to be all in uppercase so its easy for other developers when they are inspecting your code.
Keep on practicing, keep on coding!
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