profile card component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Nwobodo,

  I love seeing this kind of thread where someone's suggested stuff and you've taken it on board and made changes. Well done thats great to see!

  Looking at your html, it's invalid at the moment because you have <p> tags directly inside a <ul>. That's dead easy to fix though, just swap the paragraphs for <li>s instead (no paragraphs needed)

  Only other thing I spot from. Glancing at the result is you need a little more padding / whitespace at the bottom of the card so it looks more like the design.

  Well done on this

  0

  ---

  

  Nwobodo Igwe•375

  @Igwe0001Posted almost 4 years ago

  @grace-snow Hi, made the changes thanks for your comment on my work, I really appreciate it.

  1
• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted almost 4 years ago

  Hey, I just finished the exact same exercise so was checking yours to see how you handled it. Can I ask you why you put everything in media-queries? Your page jumps when I resize the page-size. The font strangely didn't load. And there is a lot of repeated code and a lot of unnecessary media-queries. Could you clean up your code? Start writing thinking mobile-first but without adding the media-query. Because this <meta name="viewport" content="width=device-width, initial-scale=1.0" /> is in your html, your webpage is already responsive. This exercise can be solved without any media-query. Best practice here is put everything in a div class="container"give the container in your css a max-width (350px) and a width='85%' and the component will be ok when resizing the page. In css it's very easy to write tons of code. The key is to reach the same effect, with as little as code as possible. Reach out if you have any questions. Happy coding!

  0

  ---

  

  Nwobodo Igwe•375

  @Igwe0001Posted almost 4 years ago

  @graficdoctor Hi I made some changes to it, I would really like you to look into it and tell me what you think, thanks for your input it really helped me. OH and I used your body calc function, still have to learn that too, thanks, waiting for your reply.

  0

  

  P

  Katrien Schuermans•1,210

  @katrien-sPosted almost 4 years ago

  @Igwe0001 Amazing the difference to yesterday's code! It looks fab. Maybe take of the background-size on your body? Because it is in pixels, it is a fixed value and stops your site from looking nice on screens bigger then 700px. So I don't think you need it. But I like what you did! Nice one!

  0

  

  Nwobodo Igwe•375

  @Igwe0001Posted almost 4 years ago

  @graficdoctor Done that. Thanks again for your input.

  0