Skip to content
Submitted 4 months ago

HTML CSS Social links profile

P
Emina Hadžić•60
@eminahadzicc
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 challenges did you encounter, and how did you overcome them?
  • Semantic HTML Did some reading on it and took the feedback I had on the last one with me in this project. Did struggle to find right elements, but at least a better understanding than in my last project.
What specific areas of your project would you like help with?

Open to all kinds of feedback. Help with responsiveness is welcome. And I was wondering, when in Figma the width is 384px for example, is this the set width you use for the design of the project because a few times I saw that when using the width and/or height that I see in Figma my solution is bigger than the design.

Community feedback

  • Yacoub AlDweik•2,870
    @YacoubDweikPosted 4 months ago

    Hey! Good job!

    about the width, you have a width for the mobile screen and another width value for desktop, you have to take this into account.

    I would suggest you using box-sizing: border-box property, what it makes is this: for example in the normal case if you set width to be 200px let's say then you add padding 10px, the width will be 200 + 10 + 10 = 220px, while with border-box the width will always stay 200px and the padding will be included in the width.

    keep it up Balkan!

    Marked as helpful
    1
    P
    Emina Hadžić•60
    @eminahadziccPosted 4 months ago

    @YacoubDweik Hey Yacoub, I will look into the box-sizing property that makes sense. Thanks for the feedback and the encouraging words!

    1
  • van3030•120
    @van3030Posted 4 months ago

    In.main set the width to 100% so it will become responsive to smaller screen.

    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