Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile Card Component using SCSS and BEM

@ajayv1

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have just started learning CSS. Any feedback on my CSS code would be helpful.

Community feedback

P
Grace 27,930

@grace-snow

Posted

Hi, this is a really good start!

I have a few improvement suggestions for you, but all pretty easy to fix

  • you don't need to set min-width 100vw on the body. Body is 100% wide anyway and this can cause you problems on larger pages with scrollbars
  • it's invalid html to have the whole card in a header element
  • at the moment your solution breaks on mobile landscape. It's probably due to a height instead of min-height somewhere
  • the stats shouldn't be in separate paragraphs, like 80k followers needs to be read as one sentence or list item. Instead, I suggest you place both parts inside one paragraph tag, but then use spans with classes on them to style them display block and change the things like font weight etc to get them looking right.

That's all though really, very minor changes overall, so very well done on this! 👍

1

@ajayv1

Posted

Hi Grace,

I was stuck at the background image of the body and checked your solution, Your code is real inspiration to me, the screen reader for the seo, I would have never thought of it.

Getting comments from you feel like I am on the right path. I sincerely appreciate it and will add all the suggestions you gave.

Thanks.

0
P
Grace 27,930

@grace-snow

Posted

My pleasure. And really well done on this :)

@ajayv1 I checked again and it's these things that would fix the landscape mobile issue:

body {
  /* overflow: hidden; */
}

.card-component {
  padding: 1rem; // or similar
}
0

@ajayv1

Posted

Thanks, Grace.

It fixed the landscape issue. I also added the other suggestions you gave.

0

@SaiArunesh

Posted

It is too perfect for a beginner Ajay ! Good Job

0

@ajayv1

Posted

I am really thrilled to get feedback on my work. Thanks a lot for the appreciation.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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