Hello @ sohhamm! You did great on the challenge! I noticed one issue with the styling of the bottom section with links to Twitter, location, etc. If the displayed user has a longer url the section stretches to fit the length and forces some of the content to the edge of the card.
Here is a screenshot of what I'm seeing
You can solve this in a few ways. I generally prefer to truncate the text and use an ellipsis to indicate the text has been cut off. A tooltip is a great way to display all of the text in these cases. The easiest way I've found to do this is with CSS on the element containing the text. As long as there is a container, this should pretty much always work.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
You also have a second problem in this same area, which is how your grid is designed. You've used grid-template-columns: 1fr 1fr, which is good if the columns have the same size content or if you don't care about stretching/shrinking grid cells as needed. However, what's happening in this case is the first column is as wide as the contents and the second column takes up the remaining space or the same space as the first column, whichever is smaller.
There are a lot of ways to solve this, but here's a simple way I did it without significant changes to your code.
.extraInfos {
...existingStyles;
grid-template-columns: 50% 50%;
gap: 18px 64px;
}
So we change the columns to both be 50%, forcing them to maintain their width and not stretch
.flex {
...existingStyles;
align-items: center;
}
Centering the content in the flex box removes the vertical stretching on the icons
.extraInfoTitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
And this is the change mentioned earlier to truncate the text.
Here's a screenshot of what it looks like after I made these changes in the browser.
So not really that big of an issue, just a few small changes! This project gave me a headache on that exact same part. Hopefully this will help you out!
