Submitted over 3 years ago

Chat app CSS illustration

Paweł Pikus• 100

@pawelpikus

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I found creating this mobile phone illustration in Vanilla CSS to be quite a tedious job. Someone with professional experience, please tell me there are ways to create such layout faster and with less divs... What's the usual modern approach? A framework? Or maybe you would go for Vanilla CSS here since it's not so complicated yet?

Community feedback

Massimiliano Cornale• 350

@mcornale

Posted over 3 years ago

Hi @pawelpikus,

I think you could have used less divs using only p tags when there was only text inside of the element. Also u could have wrapped all the messages in a container div with a padding to give the space around all the screen of the mobile element.

You can have a look at my implementation if u want.

Thank you,

Happy coding 😊

Paweł Pikus• 100

@pawelpikus

Posted over 3 years ago

@mcornale Thanks for the tips, I'm sure gonna look into them in my next projects. Cheers!

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