Responsive social links profile

What are you most proud of, and what would you do differently next time?

• a is a inline element

when I use a for button in <li>, I found setting style for a just useless. Only can write css for <li>.

In the end I found that because <a> is a inline element, it's width fit the content size, not the same as the parent element width like <li>. In fact, I have never encountered such a problem before. My solution is to turn a element into a block.

.card__button {
  display: block;
  text-align: center;
  padding-block: 1rem;
  background-color: var(--clr-grey-700);
  border-radius: 10px;
  font-size: .875rem;
  line-height: .875rem;
}
.card__button:hover {
  background-color: var(--clr-green);
  color: var(--clr-grey-900);
}

• flex or not

When I saw preview picture, the first thing I thought is using flex layout, but finally decided to use normal layout, because I'm not sure using flex layout like crazy is the right thing to do.

for avatar, I simply used margin-inline: auto to center. All .card__introduction module just use margin-top. But on links module I use flex.

I do not know if it's best decision, but I did it.

• use min-width on card

this time I didn't use fixed width and height, but found that made the card too narrow. If I increase the padding, it won't fit the picture, so I use min-width and larger padding to solve this problem, maybe this isn't necessary, I'll try not to use it next time.

.card {
  min-width: 326px;
  padding: 1.5rem;
}

/* responsive */
@media screen and (min-width: 768px) {
  .card {
    min-width: 382px;
    padding: 2.375rem;
  }
}

• :focus can catch tab selection.

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

When the card size is less than 300px, the top of the card disappears, and canceling min-width cannot prevent this problem.I would like it to automatically shrink, but this doesn't seem to do that automatically.