Skip to content
Submitted 3 months ago

Social Links - Dynamic Resizing

Ivaylo Ivanov•260
@ValsCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I got somewhat of a better idea on how to size things properly

What challenges did you encounter, and how did you overcome them?

Sizing the design with units like rem, em, svh and github pages wasn't in the mood to work that day :)

What specific areas of your project would you like help with?

I would love to get some straight guidelines on how to size things, since the Figma Design says one thing and I hear all kinds of other suggestions.

How much should I trust Figma with the parameters it suggests?

Community feedback

  • Sergei Borja•980
    @wonderlust101Posted 3 months ago

    This is not much a guideline but a personal opinion from a person who regularly uses Figma. You can trust the parameters IF the website design is static and will never change.

    However, as you know, as coders, we must make the design responsive and accessible, so that many people from all over the world with unique devices whether its a phone or a computer can access the site/design/game or whatever.

    So when looking at Figma and its parameters, you can use the values but maybe when you look at it, instead of using width: 40rem from Figma for example, you can use max-width: 40rem or width: (95%, 40rem) to make it more responsive. Also, Figma tends to make everything display: flex when the solution could be better solved as a display: gird.

    There are several YouTuber the I recommend on improving CSS but the one that I always recommend is Kevin Powell. He also has videos where he codes designs from this site so I can recommend him if you want so tips on CSS.

    TL;DR: You can reference the values but don't copy everything that Figma puts for better responsiveness and accessibility.

    0

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