Chat App CSS Illustration | HTML CSS Sass

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hi, great work on this one. Both desktop and mobile layout is good.

  Regarding your question:

  • You can make the background fluid, like what you said, using clamp. I primarily use clamp to make media query-less layout in some projects. Try applying this one width: clamp(25rem, 46vw, 36.875rem); on your body::before selector, this will be your base property that is inside the mobile workflow. Then you could just remove all width declaration on your media queries related to the width of the selector. For the height you can just use the clamp function on it as well. Make sure that you know the properties on the clamp. First argument is minimum second is preferred last is maximum. What will really help you to grasped clamp is that, first, add the min and max of the property that you want, any preferred size could be use as well. Example:

    width: clamp(10rem, 3vw, 37rem);
  

  10rem is my minimum, 37rem is my maximum. My size will only grow or shrink base on my 3vw declaration.

  Then what you should do, adjust your screen, go to your maximum size, for example, 1600px, then tinker on the preferred size, adjust it until you reached the maximum size. Example:

    width: clamp(10rem, 23vw, 37rem);
  

  I achieved my 37rem with my 23vw, after this, your layout will be fluid and you don't need any media queries. You can use clamp with font-sizes as well to avoid any media queries.

  If you are confused on this one, you can message me in slack and I can help with it.

  • You don't really need aria-hidden on this one since div is not really an graphic content. svgs figure img those are the ones.

  For animations, well, if you treat the phone as like a interactive element, you can maybe add like hover on the button like-ish, on the inputs, on the dots. Just micro interactions with those.

  Other than that, good job.

  Marked as helpful

  2

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @pikamart Thanks for your valuable feedback and your explanation about clamp, it really helps me understand better about it! I will try to use that clamp function as soon as possible!

  I used aria-hidden to prevent the screenreader to read the chat on the illustration 😅.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @pikamart I take a look at your profile at Frontend Mentor, then I see your slack name is Raymart Pamplona , but I only find Raymart (with girl using batman custom as a profile photo) on the slack. Is Raymart, you?

  Anyway, the solution has been updated. Can you give your opinion about the clamp() that I used for those backgrounds?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @vanzasetia that's a boy...that's me... hahahahha. but yes, that's my slack

  on the ::after your vw is too much, I tried about 25vw and it works properly, it gets the minimum for mobile, and gets the maximum on a 1440px. This is on the width, for the height, I haven't tested it.

  Marked as helpful

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @pikamart Oops... my bad 😅. Thanks for checking it!

  0
• 

  Ehab Joe•110

  @huhu0000Posted almost 3 years ago

  Great work Vansa I did submit my solution too for this challenge but I think you did better 👍 so keep it a hundred

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @huhu0000 Thank you very much for your kind words! I've just provided you with some feedback on your solution! Hopefully, it helps you improve the solution! 😉

  1
• 

  Zineb Boutaa•750

  @zineb-BouPosted about 3 years ago

  Hi Vanza, it is a great solution I loved it, layouts are perfect, concerning animation I added some to this challenge, I appreciate it if you check my solution.

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @zineb-Bou Thanks for your kind words! By the way, I'm Vanza not Venza 😉.

  1
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks Great !! Nice Job!! ⭐⭐⭐⭐⭐

  Marked as helpful

  0

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @palgramming Thanks!

  0