Four-card-feature-section Responsive

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Hey! I had a look at this project as you requested, and it's really good! Almost no issues at all from what I can see.

  The site is responsive, and it resembles the design very closely.

  The only thing I would suggest is that you should consider using padding instead of margin for the whitespace around the edges of the page.

  This is because using margin makes it so that the site has scrolling at all times, even if the user's screen size is tall enough to fit all the content.

  Using margin causes this issue because it's not considered in the calculation of the element's width or height, even if the box-sizing is set to border-box.

  border-box only includes padding and border as part of it's width or height.

  So this in combination with min-height: 100vh means that the height of the webapge is always going to be 100vh + whatever the margin is, causing the scrolling issue.

  I hope this explanation has been helpful, but if not, please feel free to ask me questions, and I'll try my best to clarify.

  body {
    margin: 2rem; ❌
    padding: 2rem;
  }
  
  @media screen and (min-width: 800px) {
    body {
      margin: 4rem; ❌
      padding: 4rem;
    }
  }
  

  Other than that, you did a fantastic job at this challenge, and I can see that you're improving a lot! :)

  Marked as helpful

  1

  ---

  

  Rod•90

  @RodRyan19Posted 9 months ago

  Thank you so much! I was actually wondering why the scroll happens. New knowledge added, thanks as always!@VenusY

  1

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @RodRyan19 No problem! I'm glad I managed to address your concerns.

  Good luck with your future projects! :)

  Marked as helpful

  1
• 

  Olaniyi Ezekiel•7,580

  @Ezekiel225Posted 9 months ago

  Hello there 👋 @RodRyan19.

  Good job on completing the challenge !

  Your project looks really good!

  I have a suggestion about your code that might interest you.

  📌If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

  It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

  I hope this suggestion is useful for future projects.

  Other than that, great job!

  Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.

  Happy coding.

  1

  ---

  

  Rod•90

  @RodRyan19Posted 9 months ago

  Thanks! yep, ive tried it but not really a fan on using it.@Ezekiel225

  0