Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found

Submitted

Bulit with Flexbox

HelalAbood 200

@HelalAbood

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Good day, friends!

This is my solution for `chat-app-css-illustration-master

  • It was so interested to use flexbox, Check the code to see it, I also may have some issue with elements sizing! Something makes them bigger than they should be! *Waiting for your comments

Feel free to leave any feedback and help me to improve my solution (or) make the code clean! Have a Great Day <3!

Check More On GitHub

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hi there,

great job! Must have been a quite a work with CSS to complete. Few suggestions:

  • Try not to use height: 100vh, using fixed height will cause data loss or overflow issues, as i experience now when i view your app on my notebook. Instead try to use min-height: 100vh, this way you don't constrain the content.

  • The paragraph on the right side seems to be a bit too bright, harder to reduce, I'd suggest increasing its value to a darker value so it has a nice contrast with the bright bg and improve readability & UX.

  • Bg decoration on right sight seems to be missing. But that's easy for you to add, since you already added the left one.

Hope you find this feedback helpful!

0

HelalAbood 200

@HelalAbood

Posted

@visualdenniss It was helpful, Thank you! May I ask, I tried to get the <div class="left">(Phone's div) more smaller with its elements but i doesn't worked at all, How can I resize it so it could be more closer to the main design ?

1
P
visualdennis 8,375

@visualdenniss

Posted

@HelalAbood When the container height is determined by the height of its content, only way is to reduce their size, in this case, it might that the font-sizes are different/bigger than the design.

Np, happy to be helpful!

0
HelalAbood 200

@HelalAbood

Posted

@visualdenniss Oh I see now, I felt it too! Thx for helping <3

1

Please log in to post a comment

Log in with GitHub
Discord logo

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