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
Not Found
Not Found
Not Found

Submitted

Responsive Design of chat-app using flexbox.

@Darshan-Pandya10

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


Hey, everyone! Waiting for your suggestions and feedback. Thank You :)

Community feedback

argel omnes 1,800

@argelomnes

Posted

Hi Darshan,

This is a good start.

  1. Do you mean the notch? It would be similar to how use border-radius to your mobile container but only applying it to the bottom of the element.
  2. You're almost there by using flex. I suggest using input instead of p and putting the img inside of a button. Also add flex:1 to input so it takes up the rest of the space.

aside: you missed the background from the design

Marked as helpful

1

@Darshan-Pandya10

Posted

@argelomnes thanks ! I didn't find any background design in my zip file. How? That's why I applied simple colour to it.And Sorry but can you please write the code for that notch.i am not getting it.

0
argel omnes 1,800

@argelomnes

Posted

@Darshan-Pandya10 If it's not included, my guess is the pill-looking images should be manually coded with hsl(270, 20%, 96%) as the body's background-color. The following is only an estimate so feel free to change the numbers. I'll leave its positioning to you.

.notch {
    background-color: white;
    width: 200px;
    height: 30px;
    /* top-left | top-right | bottom-right | bottom-left */
    border-radius: 0 0 1rem 1rem;
}

Marked as helpful

1

@Darshan-Pandya10

Posted

@argelomnes thanks man I really appreciate your support.i couldn't have done it without you.

0

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