Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Vanilla HTML and CSS

P

@AdamullaOsas

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I don't know why, but when I do project without figma file the sizing is completely different even though that I change tabs in web browser and the components looks the same. (I know the width of screen shot is 1440px but it's still annoying)

Community feedback

Boris 2,870

@mkboris

Posted

Hi AdamullaOsas nice work, the sizing can be different because of design assumptions and actual browser rendering, also things like viewport size, css resets also play a part. Given that, it's usually not a major issue if the design deviates slightly from the original as long as the project's functionality remains intact.

Some things you should look at

  • The social links are supposed to be anchor a tags styled liked buttons not p
  • Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
  • Font-size should be written in rem not px.

Hope this helps

1

Please log in to post a comment

Log in with GitHub
Discord logo

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