Single-price-grid-component-challenge using Grid

@grizhlieCodes Hey! thanks so much for the ideas! I did set max-width for both display sizes and they look nice as the original design. I still wanna ask you about that since now with max-width, the content does not grow with scaling the viewport. What I was trying to do but still dont know how is making the content grows with the viewport getting wider to a certain breakpoints. I hope you understand what I mean. Thanks a lot!

@Duyen-codes I think I can give you a satisfactory answer but first I need to quickly explain something about working with REM units, it will connect to my main point - don't worry!

I work in REM units personally and I usually use a 'trick' with REM. (Apologies if you're already familiar with REM etc, I just thought I should explain it in case, since the second part of my answer relies on it).

Usually 1rem = 16px. But if you imagine writing 350px as rem then we get into a world where we need to calculate 350/16 and that's tedious.

But what if we could make it so 1rem = 10px ? We can 😁👍:

html {
    font-size: 62.5%;
}

Now if we use 1rem it will basically equal to 10px. To understand REM units I recommend researching, try Kevin Powell's YouTube channel.

In order to do the 'truly' responsive width, but whilst working within the min/max constraints (which you should), you could use clamp. Research clamp, also try Kevin Powell's channel for that.

IF you replace the width properties you have currently with width: clamp(35rem, 22.0455rem + 34.5455vw, 63.5rem); it should work. But for the above to look correct please add the 62.5% rule as i explained before 😅.

The way clamp works is by saying: set the minimum width of our element to 35rem/350px. But use the width set in the center 22.0455rem + 34.5455vw. The vw part is what makes it responsive. Then obey the max-width.

Overall I don't recommend setting a pure % as a width for 1 reason: some people have very large displays. And it makes little sense for something that should logically take up lets say 700px to take up 40% of their screen. I can talk since I have a 49" monitor and when I first view websites I use at least half of this screen (27").

If that doesn't make sense just let me know. I can expand further.

@grizhlieCodes Thanks for all of the above. I researched about clamp on mdn, I understand that clamp(minvalue, prefered value, max value). But applying to your suggestion above on the width, I wonder where this Math is coming from: 22.0455rem + 34.5455vw. Thanks for explanation!

@Duyen-codes The math is 'magical' from a tool I created haha.

The said tool is here.

The math behind said magic is here as a SCSS mixin:

$breakpoints-units: (
  "mobile":        375,
  "mobile-wide":   480,
  "phablet":      560,
  "tablet-small": 640,
  "tablet":       768,
  "tablet-wide":  1024,
  "desktop":      1248,
  "desktop-wide": 1440
);

@function fluid($size, $minSize, $maxSize, $oneRem: 10){
  @if map-has-key($breakpoints-units, $size){
    $size: map-get($breakpoints-units, $size);
    $mobile: map-get($breakpoints-units, mobile);
    $minWidth: $mobile / $oneRem;
    $maxWidth: $size / $oneRem;
    $slope: ($maxSize - $minSize) / ($maxWidth - $minWidth);
    $yAxisIntersection: -$minWidth * $slope + $minSize;
    $vwUnits: $slope * 100;
    @return clamp(#{$minSize}rem, #{$yAxisIntersection}rem + #{$vwUnits}vw,#{$maxSize}rem);
  }
}

I have a VERY intuitive understanding of math, meaning I guess correctly a lot of the time and I don't have a clue how to explain it. To make things worse, I found most of the above math in someone else's solution to the same problem (making truly responsive clamp measurements)

@grizhlieCodes oh jesus! You're like a genius lol. For me it's very hard because I cant use something i dont fully understand. Btw I visited your website (wanna employ site), it has a typo only (defenitions, I guess you were trying to say 'definition' instead). Overall the site looks awesome!

@Duyen-codes A TYPO D: noooo, thanks for pointing it out. I actually forgot to run the site through a spell checker 🙂🔫👈.

And I'm not a genius haha. I took most of the math from someone else, understood the math at one point but NOW I'd have to go over it again. The above looks impressive because it has a bunch of variables with $ but it's not.

I know what you mean - can't use without understanding it fully, I respect and almost connect with that but in the end you'll be shocked at the amount of things you will HAVE to use without understanding them fully.

Such is the frontend world - a burning forest - but keep on smiling and learning haha.

@grizhlieCodes Right! I'm still a complete newbie. Got a lot to learn still and I've learning on my own so really appreciate your help and explanation. As I read your stories and background, you definitely get my respect and admiration.

@Duyen-codes Wow, thank you :). I'll take it.

All I can say, enjoy the learning process. It's basically never ending once you start dipping your toes into Javascript, frameworks, etc. Even then CSS is still a fun ride and can be a maze. I find that beautiful tbh - always having something new to learn.

Upload more solutions, with more questions, I'll be sure to always check them out. Hopefully that what it means when I click 'follow' on someone? I love FEMentor for this reason. Keep up the good work 😁

@grizhlieCodes Yes sir :) Thanks so much! You too, keep up the great work!