Insure Landing Page Using CSS Grid & JS (Commented & Organised Code)

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work on this challenge! You've done a really good job. You can see from the design comparison above that your overall layout is really good. The major areas you could tweak would be things like spacing, font-weight, and font-size to get it to really match up to the design. It's well worth spending the time to make these refinements, as attention to detail is a great skill to build up as a front-end developer.

  I noticed your main image often gets squashed or stretched. This is because you're setting the height and width on it. There are two possible solutions:

  • Avoid setting both the height and the width. If you only set one of them, the other will take care of itself. I typically prefer setting the width and leaving the height to be calculated automatically.
  • If you really need to set both of them, use object-fit to make sure the image always maintains its aspect ratio. The value I use most often for this is cover. So the full declaration would be object-fit: cover;.

  I hope that helps. Keep up the great work and let me know if you have any questions! 🙂

  1

  ---

  

  aashish-cloud•515

  @aashish-cloudPosted over 4 years ago

  @mattstuddert I am really thankful that you took the time out to review my code. I totally understand the key areas you are asking me to focus on and I will surely work on them to refine my work.

  Though I am kinda confused about sizing the images.

  • If I go with the first option i.e., to set either width or height. I usually end up getting something which doesn't look good on page. ( It usually becomes too small that I will have to change the whole hero-section and it will effect the spacing of the whole page further, which doesn't sounds like a nice idea. )

  • So I move on to the second option, i.e., setting up both height and width on my own. Which, as you said, results in disturbing the aspect ratio of the actual image and making it look stretched or squashed. I tried setting up the object-fit: cover but it results in cropping/clipping the image if the aspect ratio of the image cannot be maintained in the defined height and width. Which also doesn't look nice.

  Can you please tell me how can I counter that ? And once again I am really really thankful that YOU took the time out to review it. It means a lot.

  Thankyou - Aashish

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @aashish-cloud you're welcome! On your first point, you could add a media query to change the layout when the image starts to look too small. On the second, having parts cropped off is a better outcome than the whole image being distorted. It's not ideal but sometimes it has to happen! 🙂

  1

  

  aashish-cloud•515

  @aashish-cloudPosted over 4 years ago

  @mattstuddert Sure! I got your point and I will keep these things in mind. Thank you so much for your support. 🙂

  0