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

Mobile first

Malloryβ€’ 120

@azerroth11

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 feel like I did pretty good but I'm of course open for suggestions for improvements ! Thanks in advance :)

Community feedback

P
tedikoβ€’ 6,580

@tediko

Posted

Hello, Mallory! πŸ‘‹

Congrats on finishing another challenge! Your solution looks very good and also responds well. In addition to Dinesh feedback here's my few tips:

  • Change the alt attributes for the .card-top logo, as it doesn't add any extra context for screen reader users. Since your image is decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

Good luck with that, have fun coding! πŸ’ͺ

1
Dineshβ€’ 1,115

@Dinesh1042

Posted

Hello, MALLORY!πŸ‘‹ Fantastic work on this challenge.

Here are my few suggestions.

  • When I resized my screen to tablet view your .card seems to be too small. I think you have used mediaquery at 375px .You should increase your media query width to make it responsive
  • You can use max-width in the .card. So it won't grow when it hit the certain point.

Wish you Happy Coding.πŸ’ͺ

1

Malloryβ€’ 120

@azerroth11

Posted

Thank you for your suggestions !

I had indeed only focused on mobile and desktop and forgot about making it flex. I ended up setting a set pixel size to my card. While it's usually not a good and flexible way to do things, in that very specific context, I believe it works and allows the card to stay perfectly shaped in all scenarios. I made it slightly bigger on desktop :)

Thanks a lot for the reminder :)

0
Malloryβ€’ 120

@azerroth11

Posted

Thank you for your answer, I did as you suggested !

I thought that it was important for bots to read the website and have a complete code, that's why I've taken the habit to provide something.

i'll make sure to think more of the need for it in the future :)

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