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

Chat App CSS Challenge

Vladimirโ€ข 170

@D0vl4

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


Hello community ๐Ÿ‘‹๐Ÿป

I had so much fun doing this challenge. Any feedback is really appreciated ๐Ÿ™๐Ÿป

Thank you ๐Ÿค 

Community feedback

S MD sulemanโ€ข 3,530

@sulemaan7070

Posted

hey Vladimir๐Ÿ˜„, congratulations on completing the challenge... here are a few tips to make your site better.

1.For the custom radio-button according to the design you can do something like this

.negotiate input[type="radio"] {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--Dark-Grayish-Violet);
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 5px 0px gray inset;
}
.negotiate input[type="radio"]:checked {
  background: var(--White);
}

2.using height:100vh ๐Ÿšซ is a bad practice you can use min-height:100vhโœ….. the height:100vh is causing problems on the mobile view.

everything else seems great good job happy coding๐Ÿ’ฏ๐Ÿ”ฅ

Marked as helpful

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