@Rayco21
Posted
3 things I think I can help to make it better
.profile { width: 100%; height: 625px; min-width: 375px; max-width: 375px; background-color: var(--darkGrey); border-radius: 15px; text-align: center; }
width:100% ----> means I want it to grow or shrink to have 100% width of the container min-width: 375px. ---> means I don't want it to grow more than 375px max-width:375px. ---> means I don't want it to shrink less than 375px
so it means you want it to have fixed 375px you can just set width: 375px then and get rid of min-width and max-width
.profile__location { color: var(--primary); font-style: normal; font-size: 0.8rem; font-weight: 600; padding: 10px; }
.profile__description { color: var(--white); font-size: 0.8rem; padding: 20px; }
looks like to me you set padding to have space between elements imagine if you had background-color for these elements, it would cause undesired issue it's best practice to use margin instead of padding
.profile__link { display: inline-block; width: 300px; height: 45px; font-weight: 600; font-size: 0.875rem; color: hsl(0, 0%, 100%); text-decoration: none; background-color: var(--grey); margin: 8.5px; text-align: center; line-height: 20px; border-radius: 10px; padding: 10px; }
looks like these links don't have their texts vertically centered, so you can either center them by setting them to flexbox, or another approach is that to set line-height:45px (height is currently set to 45px) when line-height has the same value as height the text will be vertically centered (you will need to get rid of padding-top and padding-bottom though if you take this approach)
Marked as helpful
