Submitted about 1 year ago

Chat App Illustration - Very difficult

RaidEyes• 390

@RaidEyes

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

This is a solution for...

Chat app CSS illustration

HTML
CSS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

A Super Difficult CSS Challenge !!!

Here are some highlights:

I used fixed width for the app interface and the heading because they look better without responsiveness.
The ::before and ::after that I placed in my body was very hard to shape. I managed to get them about 80% right. If you know the correct way, please show me.
I went through a lot of trouble just to get the correct shapes for the body and the top app box.

Overall, I'm very happy that I completed such a hard challenge. Let me know if you can give me some advice on how to organize my CSS code. Thanks!!

Community feedback

RaidEyes• 390

@RaidEyes

Posted about 1 year ago

I don't know why it looks bigger than the size in the design. Can someone please help me?

RaidEyes• 390

@RaidEyes

Posted about 1 year ago

@RaidEyes Update: I use transform: scale(0.65); to make it smaller and match the design. Tell me what you guys think, is it a good approach?

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