Stats Challenge Solution

@grizhlieCodes Hi, I'm currently in the process of redoing this challenge and your tip on going for a mobile-first approach has helped alot. But when making the website responsive, I've run into some issues regarding the min, max, and clamp functions. I've used vh and vw for my measurements but I don't really know how to put that into the functions since I'm not sure how the units work on the min and max functions. I've changed these to px for now, but I don't really feel comfortable using px for measurements since I have to be precise. Any help is appreciated!

@DenzDy For clamp max and min are usually in REM/px. Using a dynamic size on a 'max' missed the beauty of it. The middle (preferred) value is where you want a dynamic size to go.

This will usually be a mixture of some rem + vw.

Pixels actually are as precise as it gets in a way. Everything ends up being calculated in pixels. The issue is setting max-heights or heights in general with pixels as content tends to flow out of containers when it's adjusted slightly from the original designs.

Also, your font-sizes seem to be in vh. This is a very bad idea 😅. Lets take this as an example:

.text h3 {
   font-size: 5vh;
}

This will grow forever! What you want is to use REM units for font-sizes. In general REM is your best friend. There are other viewpoints on this of course and to be honest you can spend quite a while learning about each approach. I, for now, opted for a simple approach.

:root {
     font-size: 62.5%;
     /* now when you type font-size: 1rem it will equal to 10px. 1.5rem = 15px, etc.  */
    /* by default 1rem = 16px or whatever font-size is set in html/:root */
}

Once you set a font-size it shouldn't change in between the minimum and maximum.

I could make a video doing this challenge from scratch if you'd be interested and try explaining why I'm doing everything, i could be comparing it to your solution on the go perhaps?

@DenzDy One more seperate question, where did you come across setting stuff in vh/vw so much? These are generally not used as much anywhere I've seen, wondering if it's an experimentation-led solutions or some resource I'm not familiar with (or methodology)? Thanks!

@grizhlieCodes I joined a front-end dev. camp and the solution for the task had vw units in the font sizing. The use of vw in the challenge did make sense though since it was made without and responsive css in mind. When should I be using the viewport units instead of px and em? Also when should I be using px? Also, the video of you making this would be great too. Thanks in advance!

@DenzDy Interesting, I'd never use them. Seems like a weird solution, or at the very least a limited + outdated one? I find this to be the case with 50% of the stuff I uncover online. (I was very slow and careful choosing what I learned. I usually try finding YouTubers who know damn well what they are talking about and stick with them, Kevin Powell for example).

Viewport units are a rare case I think. We have better tools at our disposal now. I'm drawing a blank as to when I might have used vw (there are definitely cases where you can use it but there are not common i think). I think the only thing I use them in is clamp 😅. Because clamp lets you increase the font size with the viewport BUT it sets a maximum. Imagine my screen (49") with the webpage maxed out. The font would be HUGE and unnecessarily so. Realistically most websites will have a max-width, for the content at least. Sometimes background related stuff can overflow, no problem. But the content can't be spreading into infinity based on the viewport, it wouldn't work and for most sites, there's just no need for it.

body {
    width: 100%;
    height: 100vh; /* here we use vh */
    display: flex;
    flex-flow: column nowrap;
    align-items: center; /* center our child/ren */ 
    padding: 2rem;
}

.content {
      width: 100%;
      max-width: 1110px;
}

Simple example of what is perfectly fine to do. Since we are setting a max-width for our content there is absolutely no need for the font to be THAT dynamic that it starts overflowing anywhere.

I'll record my solution and will link it here. I'm pondering on YouTubing and trying to learn + teach best principles/practices I come across. I find that a lot of stuff out there is outdated when I'm researching best practices, best bet is some CSS Tricks articles usually 😅.

I usually use REM throughout my projects. Almost never use px. I avoid EM since it usually results in weird behaviour in some cases, possibly due to my ignorance of it or lack of forethought.......

Anyway - I See what you mean. I suppose thinking that vw makes sense for a font-size that needs to be dynamic does make sense at first. Clamp is the best way of achieving this now due to the already-stated benefits. Whilst it does include vw, it most certainly needs that max width in px/rem.

Simple example of clamp in action.

I made a video for another Frontend Mentor person that may benefit you, it's for the User Preview Card challenge. I try building it whilst using as clean code and best practices (to my knowledge) as I could. Link here if you think you might benefit from it.

@grizhlieCodes Also, should I be using clamp on padding, width, and height aswell?

@DenzDy up to you. I choose depending on whether it seems to be working or not. Sometimes it’s better to just stick with a media query.

@DenzDy Howdy! Ended up recording the video today. Still testing some video-quality settings but it seems crisp to me. Either way I go through just about everything I could have thought of. Btw, you don't have to watch it, you can just have a look at my solution. It was quite interesting recording and verbalising thoughts though 😀

Video link

Solution link