Responsive CSS Mobile First Profile Card Component

Hi, Chris! 👋

I wouldn't recommend aiming for "pixel-perfect" solution instead I highly recommend focusing on the quality of your code. Josh Comeau has a great article about "Chasing the Pixel-Perfect Dream" which I highly suggest reading it.

It looks like you are trying to use the BEM naming convention. If so then, there's shouldn't be any element nested within another element.

• BEM - block__element--modifier
• BEE - block__element__element

For the card__footer element, I would recommend using ul and wrapping each element with li instead. Also, instead of using br element to make the text move to another line, I would recommend making the span as display: block instead.

That's it! I hope this information is useful!

Hi, Vanza

Made the suggested changes and a few small edits. Thanks for the help! much appreciated.

Chris

Hi, Vanza

Thank you very much for your feedback.

Great article and provides practical reasons for the differences in design tools and our code. Especially liked the tip on "Going the extra mile" and its information on "optical alignment".

Yes, BEM trying to get my head around how to use this properly. Need a little more practice, if you have an articles or resources on this I would appreciate them.

I was toying with the idea of using ul and li for the card__footer. I totally agree and will ammend the code as suggested.

Thanks again for your time, much appreciated!!

Chris Mulvany