social-link-profile-solution

Trying to match all the measurements can be quite a challenge. I have added two tools to my arsenal. First- a Graphics Program that will display an image at 100% (Faststone Image Viewer works). Second- PicPick, an image accessory program. PicPick has a ruler you can use on screen where you are viewing the Design Image provided with the challenge. This allows you to measure everything, the card size, spacing between elements, spaces that would be margins or padding, etc. This makes it a lot easier than trying to guess the dimensions.

Hello @Mystique9901!

Nice job! Here are some tips i think could help:

1. Start with mobile design first, it will make it a lot easier to code, give it a try and see how it goes. I recommend this to you because that way you don't have to give the card a width or height, if you start with mobile first you just need to give the body a padding and center the card horizontally, like this:

body{
    min-height: 100dvh;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

This way you will have the card at the right size from the start, if you want it to grow a bit or not grow at all you can give the card a max-width property, like this:

.card{
    max-width: 25rem;
{

That way it will grow if there is space but only up to 25rem or the value you want.

• Instead of using height: 100% use min-height:100dvh In this challenge the page only has one section but in a multi-section page (header, hero, about, footer) height: 100% will cut the rest of the sections because it won't grow with it's content.

If you need more help feel free to reach out! i will answer your questions the best i can.

If you find my reply useful please mark it as useful.

Block level elements have 100% width by default and I don't overwrite that, instead I use @media (min-width: some_screen_size) then inside it I will set max size the width can get for bigger screen sizes and always use rem:

@media (min-width: 35rem) {
  .card {
    max-width: 15rem;
  }
}

@media (min-width: 45rem) {
  .card {
    max-width: 18rem;
  }
}

Never use height, min-height, and max-height on elements, it is the job of the browser desige what height they should have based on their content.

Also you can give the links and the card itself some padding to make them more readable and look better.