Submitted over 2 years ago

Responsive Chat app Ilustration using CSS flex - grid.

Rony• 420

@romzc

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

Hello community, my solution for this challenge, I used div's to the get background shapes, if there is another way to do it, please let me know.

Community feedback

Krzysztof• 240

@KrzysztofLeczycki

Posted over 2 years ago

Hi,

your solution looks fine. I have a few thoughts: the whitespace between the chat illustration and the text could be more flexible on screens width lower than 700px or move the text below the illustration,
background shapes have different alignments in narrower screens. Play a bit with that. If you don't want to use divs to format these shapes, you can play around with the CSS pseudo-elements: ::before and ::after.

Best wishes :).

Marked as helpful

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