Web first site using some flexbox and positioning

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Vanessa Martin! 👋

  Congratulations upon completing your first Frontend Mentor challenge! 🎉

  Good work on this one! 👍

  I suggest,

  • Adding overflow-x: hidden to the body (or allowing some of the elements on the page [such as the hero image] to decrease in width when the width of the page decreases) to avoid a horizontal scroll bar from appearing along the bottom of the page when the screen is resized.
  • Adding cursor: pointer to the button element would be a nice touch!
  • Perhaps making the input element a little wider in the mobile layout of the site would be a good idea, too.

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Vanessa Martin•155

  @vsm1996Posted almost 4 years ago

  @ApplePieGiraffe

  Thank you so much for those pointers!

  I will implement them asap. I definitely have issues with making images responsive, so if you could give me some more pointers on that, it would be greatly appreciated!

  I am so excited to continue this journey and learn! Happy coding! 😄

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @vsm1996

  Yeah, making images responsive can be quite tricky! One thing you can do is give the image a fixed height but a width based on the width of its container or the width of the viewport. That way, the image should retain its height but decrease in width when necessary, and if you add object-fit: cover for the image, it will be cropped (and not distort) when the ratio of the height and width changes. 😉

  1