Skip to content
Submitted 6 months ago

social media links with HTML and CSS

Letícia Oliveira•300
@zapfish1
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 specific areas of your project would you like help with?

i think i did a bad job trying to center the div

Community feedback

  • Moses•340
    @mbtenkorangPosted 6 months ago

    Hello @zapfish1 ... Easy there, you did not do a bad job. You got most of it close to the design as possible (thumbs up 👍👍👍 for that), just that you took a more challenging😬🥵 route.

    Now, let's make a few adjustments to make it great.

    • Did you know that, the browser applies styling to the elements on the page before the stylesheet is applied. Some of these styles have a way of distorting the styling that is added later. Hence, most devs (🤔 - if not all) apply some resets to create a "base" look for the webpage before styling and you should too. It is called CSS Resets. There are a lot of articles about it online. The lines below 👇👇 should be okay for this project.
    *,
*::before,
*::after {
    box-sizing: border-box;
}


* {
    margin-block: 0;
    padding: 0;
}

body {
    min-height: 100vh;
}


img,
picture {
    max-width: 100%; /* helps to fit image within page/div container */
    display: block;
}
    • In relation to positioning, here are a few observations;
    1. The div.child element is applied these styles;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

    and I am sure it was supposed to work with the style declarations for the .container element to position the "card" in the center. I am of the view this is a hard way 🥵🥵😬 to do it. I recommend that since you are fond of grid you apply this style {display:grid; place-items: center center;} to the <body> to place the div.child in the center. No margin or padding needed.

    1. The positioning effect achieved using this declaration
    .links a {
  display: grid;
  justify-content: center;
}

    can be done with {text-align:center;} 😉....

    • The initial max-width styling for the <img> element in the css reset can be reduced when applying the actual styles to get the picture like the size in the design. The size is most likely below 40%.

    • I noticed you used a px value for the max-width of the div.child element. You can consider using a % value (which is way more responsive) for the mobile design, then apply the px value for desktop/larger displays using a media-query - read more about it on MDN

    I hope the following help improve your solution. All the best and happy coding😁🧑‍💻

    Marked as helpful
    1
    Letícia Oliveira•300
    @zapfish1Posted 6 months ago

    @mbtenkorang thank you so much!! i updated my code with your suggestions, using grid is a great idea it made everything so much easier :D

    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