Solution using Sass

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  BODY MEASUREMENTS 📐:

  • Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation. Since this component is big enough to fill the screen the component will be surely cutt-off which may cause the users a terrible experience, it might need to addressed quickly.

  ---

  • For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

  ---

  • But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Da•360

  @DaTheDumbGuyPosted 7 months ago

  @0xabdulkhalid Thanks for the feedback~ I get what you are saying. Fixed height can cause trouble later when the content overflows, and I fixed the height of the body for the main to take its height (height: 100%) to center the content of the main, considering the content of the page is just that.

  With your suggestion, actually I didn't think about using min-height that way. I usually use min/max on media queries and max on content I want to limit the width for responsiveness.

  I changed the min-height of the main to 100vh, according to your suggestions. Thanks again! Your suggestion is really great. Cheers! ( •̀ .̫ •́ )✧

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @DaTheDumbGuy (This sounds so disrespectful x_x), first of all, I'd like to congratulate you on the project. It turned out very similar to the proposed design, almost identical. Congratulations.

  About your Sass, it honestly looks good. I didn't see anything so incorrect. You're using @forward, which is good, and @use, which is also good. You're separating it into partial files, so it's correct and well-organized. Congratulations.

  Now just a small tip related to Semantic HTML, your <div class="card_stat">, could be replaced by a <ul>, because if you look closely, each item within stat is related.

  And again, congratulations on your project and another congrats for making your project in light mode. I hope your eyes are okay. If anything I said isn't clear, please comment below, and I'll try to help you in the best way possible.

  Marked as helpful

  1

  ---

  

  Da•360

  @DaTheDumbGuyPosted 7 months ago

  @R3ygoski Hey there~ my username is kind of weird, its fine lol. 〜(￣▽￣〜)

  I did change the card_stat to ul and you are right, the section tag looks odd there. I got used to using the section and didn't think it through before using it there. Thanks for pointing that out!

  About the Sass, I'm currently studying not long ago, and it takes a lot of my time organizing things and learning where to put things. With your feedback, I guess I'm doing good. I watched Kevin Powell on YouTube explaining about @forward/use, that's why I'm using them.

  Anyway, thanks again! Your feedback ease lots of my worries regarding how I use Sass. By the way, my eyes are good. They are bleeding but it's fine. (⌐■_■)

  1
• 

  Da•360

  @DaTheDumbGuyPosted 7 months ago

  I read on someone's work having a suggestion of using mix-blend-mode: multiply on the image overlay. I never heard about it, but it works perfectly. ¯_(ツ)_/¯

  0