Skip to content
Submitted 3 months ago

Responsive Social links

Abiola Daniel•50
@Africa4795
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?

proud of using flex and hover

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

no challenges

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

Feedbacks are Welcome!

Community feedback

  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 3 months ago

    body {max-width: 1440px;} please, remove this style. It's wrong to add max-width to body and it prevents your project from being centerred on bigger screens. Hope you found this comment helpful :)

    Marked as helpful
    0
    geomydas•1,440
    @geomydasPosted 3 months ago

    @SvitlanaSuslenkova Just to add, on larger projects which are not single component such as the insure landing page or the easybank landing page, it is fine to add a max-width in the body with {margin: 0 auto} for very large screens

    Marked as helpful
    0
    Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 3 months ago

    @geomydas Isn't it easier just to justify content with max-width for any screen?

    0
    geomydas•1,440
    @geomydasPosted 3 months ago

    @SvitlanaSuslenkova i don't get what you mean, for this challenge i don't reccomend setting a max-width but for larger projects (spefically page with multiple sections), it is okay to do so and is not bad practice in any way

    0
  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @Africa4795,

    Nice project! Here are a few suggestions to consider:

    Centering the Card: To center the card, you can use flexbox on the <body> with align-items: center and justify-content: center. Another useful technique is to set the content to position: absolute, with the parent as position: relative, and then use top: 50%, left: 50%, and transform: translate(-50%, -50%). This method is good to know for cases where you need to center and overlap elements(Avoid absolute center it when possible because hard to customize).

    Responsiveness: As @geomydas pointed out, projects with a lot of absolute positioning (or complex ui) can be challenging to make responsive t.ex https://www.frontendmentor.io/challenges/arch-studio-multipage-website-wNIbOFYR6. For such cases, setting a max-width is essential. For this project, however, you really only need a single <main> container, with flexbox to center it and flex-direction: column to stack the content inside the card.

    Keep up the great work!

    Best, Teodor

    0
    geomydas•1,440
    @geomydasPosted 3 months ago

    @TedJenkler Another tip I have for centering divs is this

    .parent-element {
display: grid;
place-items: center;
}

    Thats it

    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