Responsive Social Links Profile with Custom Fonts & Flexbox
Design comparison
Solution retrospective
I'm most proud of integrating custom fonts using @font-face and maintaining a responsive layout through a mobile-first approach. Next time, I’d explore CSS Grid for more complex layouts and focus more on performance optimization, like using font-display: swap and serving fonts in WOFF2 format for faster load times.
What challenges did you encounter, and how did you overcome them?A significant challenge was creating a responsive design that adapts seamlessly across different screen sizes without overusing media querries. I used Flexbox for layout management, which allowed me to center elements both horizontally and vertically with the my custom classes .flex and .flex-center. Additionally, I employed a media query to adjust the width of the list of links on larger screens, ensuring a consistent and balanced layout.
What specific areas of your project would you like help with?Any suggestions for enhancing the code organisation and accessibility, would be appreciated.
Community feedback
- @rupali317Posted 3 months ago
Hello @Jomagene
Great work on this challenge. I have the following feedback:
-
In terms of accessibility, you should never use pixels for font size because if I rely on large fonts and I go to my browser settings to alter the fonts to larger ones and then I come to your project, I will see that your fonts have not scaled. It is not great for accessibility. That has happened because you use pixels. Pixels are not good for scaling. Pixels are fixed. You should use rem instead.
-
For the quotes, you can use the <q> tag
-
I noticed that the right side of the image seems to be chopped off. Unfortunately, I am unable to upload the screenshot. This can be fixed by eliminating the
<section class="image-container"></section>. It is not needed. Just the<img>related code is enough and in your CSS of the img, you apply the border-radius. You already have the height property for image. Try to keep the code simple. No need to complicate the code. -
Another piece of advice: Your project should have a CSS reset otherwise different browsers will apply their own default stylings. We want a consistent look and feel in all the browsers. Refer to this CSS reset article
Let me know if the above suggestions help
Marked as helpful1 -
- @tylerhyndman484Posted 3 months ago
Looks very close to the design! Very well done! I did notice though that the font for the name of Jessica Randall looks a little different than the one in the design; but very nice work!
Marked as helpful0@JomagenePosted 3 months ago@tylerhyndman484 Thank you so much for your kind words and for taking the time to provide valuable feedback. It really helps me improve my work. Thanks to your observation, I noticed the mistake with the font family, and I'll be sure to correct it.
0 - @JomagenePosted 3 months ago
@Rupali Thanks so much for the feedback! Was it helpful? Absolutely!
You're right about the pixel font sizes. I'll be switching to rem for better scalability and accessibility—I finally understand why it’s so important, thanks to you. Great tip on the <q> tag for quotes; I'll start using that to keep things more semantic. Thanks for spotting the issue with the image being chopped off. I’ll clean that up. And the CSS reset? Yet another great lesson learned! The article you shared is fantastic, and I’ll be implementing a reset to ensure consistency across browsers.
What a comment! I’ll be applying these updates right away. Thanks again!
1
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