Responsive BMI Calculator using CSS Flex, Grid, JS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @Antonvasilache,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful:

  1. Make the Website Adaptive to Large Screen Sizes:

     • Your website currently stretches on large screens. This happens due to the .main element stretching beyond the intended width. To fix this, you can add max-width: 1440px; to your .main element. This ensures that the website content does not exceed 1440px, regardless of the screen size.
     • As we are using the max-width property, you don't need to worry about changing the width for smaller screens.

     .main {
       max-width: 1440px;
     }
     

  2. Add the Background Image:

     • In the design, there is a background image of some hair-like structure. You need to add this to the .result and .bmi-limitations sections.
     • Use the background properties to position the image correctly.

     .result, .bmi-limitations {
       background-image: url('path-to-image.jpg');
       background-position:  right top; /* Adjust as needed */
       background-repeat: no-repeat;
       background-size: cover; /* Adjust as needed */
     }
     

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  1

  ---

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  @krushnasinnarkar

  Hiya, according to the Frontend Mentor Guidelines it's not allowed to:

  "Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

  Please be mindful of this in the future.

  0

  

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @DylandeBruijn,

  Thank you for letting me know about these guidelines. I wasn't aware of them as I started using this platform just a few days ago. I started doing that because I saw your comments and then began doing the same. I'll make sure to follow the guidelines and be more mindful in the future.

  Thanks again for your guidance!

  1

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @krushnasinnarkar,

  I didn't know about the guidelines either but someone pointed it out to me and the founder of Frontend Mentor even chipped in, so I changed it. Just letting you know!

  0