Submitted about 3 years ago

Used only HTML and CSS

Mohammad Bilal• 10

@mbilal1109

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I didn't do a mobile design because that's something I'm still learning, but other than if there any changes you guys think I can make feel free to let me know.

Community feedback

Michal• 665

@mbart13

Posted about 3 years ago

This challenge doesn't need any special steps like media queries to make site responsive. The reason it's not is because you put set widths or heights, use max-width instead. I don't think you need to set height at all

Mohammad Bilal• 10

@mbilal1109

Posted about 3 years ago

@mbart13 Oh I see now. That actually helps a lot, I will try using max-width. Wouldn't max-width still show a little bad on a mobile or should it look good because with set widths and heights it's showing well on mobile but there is a lot of scrolling and I was able to zoom in and out.

Michal• 665

@mbart13

Posted about 3 years ago

@mbilal1109 I try to avoid set widths whenever I can, you can check my solution to see how that could look

Marko Nikolajević• 1,065

@MarkoNikolajevic

Posted about 3 years ago

Hi Mohammad! You did a good job. Looking at your code I've some suggestions

you used ids on all of you h3 tags <h3 id="black">, an id must be unique, in this case you can use classes instead, <h3 class="black">
I suggest you to create a div for the card and put card's elements inside it

Keep on coding!

Mohammad Bilal• 10

@mbilal1109

Posted about 3 years ago

@MarkoNikolajevic Thanks for the feedback. I totally forgot to change the id selectors to classes.

Please log in to post a comment

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