Skip to content
Submitted 7 months ago

Responsive Social Link with plain HTML & CSS

David Dutra•230
@dvdgd
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 am proud that I have it close to the design and also about the transition in hover in and out state.

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

I encountered some difficulty in adding the correct padding along the card and how it behaves with the anchor being like a button. I solved the issue by adding a width of 80% across the card's children.

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

I would like help with the padding of the card and also how to style the anchor properly. I think I haven't taken the best approach, but I can't see how to style it using padding and achieve the same responsive behavior.

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 7 months ago

    Olá novamente David, e mais uma vez, seu projeto está muito bem feito parabéns.

    Sobre esse problema que você teve ao utilizar o padding no card, acredito que se deu ao fato de você não ter usado box-sizing: border-box no seu seletor global, tanto que quando eu o adicionei e removi o width: 80% ele ficou semelhante ao que estava antes. Ah e eu havia colocado o padding de 2rem nas laterais.

    Agora sobre a sua <a>, ela está correta, eu acredito que você acha que não ficou correta devido a ter usado width, correto? Se for, saiba que como ele é uma medida relativa, ele ajuda muito a deixar os elementos responsivo. Agora se for em relação a outra propriedade da tag <a>, então por favor diga aqui em baixo que tentarei esclarecer.

    Deixarei aqui dois links sobre box-sizing.

    Em suma seu projeto está imepcável, tanto na semântica, quanto na estilização, parabéns, continue assim, caso algo que eu tenha dito não tenha ficado claro, já sabe, só comentar aqui em baixo.

    Marked as helpful
    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