Vanilla single price grid component

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Arun, awesome work on this challenge. Your solution screenshot is basically like-for-like with the design! 🙌

  For the width issue, I'm just guessing but did you change the display property to block? You'd need to do this to get it to fill the parent. Or display: inline-block and width: 100%;.

  Using vh and vw too much can lead to some tricky situations. I'd recommend only using them rarely for very specific situations. I typically use rem units for things like font-size, padding, margin, and others. If it's a column I'll use either % units, fr units if I'm using Grid, or flex-grow or flex-basis for Flexbox.

  The way you've written your CSS is fine! The only thing I'd recommend doing is reviewing the breakpoint at 500px. When it first switches there isn't enough space on the screen. So you could increase it a bit to make sure the content always fits.

  I hope this helps. Let me know if you have any questions!

  1

  ---

  

  Arun•285

  @arun-robertsPosted over 4 years ago

  @mattstuddert

  Thanks!

  Yep, just tried changing display to block on an a tag. Fixed it. I'll use a tags from now on.

  What kind of tricky situations? I tried searching but all I found were the old compatibility issues and they seem to be mostly fixed now. Even on IE. I can see now why I went for vh and vw though. I was explicitly setting the font-size to 15px on my body even on mobile view, so vh and vw were the only way I could get my layout to look good across all devices. I'm guessing every device has its own root font size so that 1rem changes size across devices?

  Excellent news. I've just learnt about BEM so I might try that for the next couple of projects, too. As for the breakpoint, thanks for picking me up on it. I saw it but I foolishly assumed no one would be trying to view the site below 600px anyway. I'll fix it in the next challenge.

  Thanks for the tips and feedback!

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @arun-roberts you're welcome!

  For vw, it only looks at the viewport width and so you can get into issues where a child element can overflow its parent if you're using vw to set the width.

  For vh, I'd recommend not using it to set the height of elements, unless you specifically want it to be 100% of the viewport or something like that. I see people using vh to set the height of section or other elements when they don't need to. This can cause issues whereby a user with their browser window set to be wide but short in height can't see some of the content because it starts to get squashed vertically.

  So I'd only recommend using them for extremely specific reasons and not as a common unit.

  1

  

  Arun•285

  @arun-robertsPosted over 4 years ago

  @mattstuddert

  I see what you mean now. I was excited by vh but I see now they're not quite as universally scalable as rem/em.

  Super interesting.

  Thanks again!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @arun-roberts no problem! They’re great in very specific instances. But not for liberal use 👍

  0