Single-price-grid-component-challenge using Grid

Community feedback

• 

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  Oh yes - if you do display: none on the ul.benefits-list you will see that the problem (line) also disappears. Or if you remove padding from section.benefits. But these of course don't solve the real issue so I thought the above solution was apt to mention.

  Marked as helpful

  0
• 

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  At first i thought the fix was going to be width or padding based but after a few thoughts I decided that the solution is to simply supply your main with a max-width. The card shouldn't get that small. There's an issue with the content being squeezed too much and it messes up the width of the card for some reason.

  For the mobile view you had the right idea, width: 85%. I suggest we keep it that way and remove that width: 40% from the media query.

  On that note, a few suggestions:

  Assuming you'll remove the 40%:

  Overall the width: 40% should be avoided UNLESS it's coupled with one more step:

  Add max-widths per display size. In this case you can just add a max-width for the mobile view, I went with 350px for this and then 635px for larger display sizes. You can tweak these to your liking, the point is to control this a bit more whilst leaving it mostly responsive with that %.

  I think you were trying to get that width: x% do too much work by itself basically. We can help it out with max-width. This is generally an awesome strategy for a ton of stuff you will code.

  Best part about it is that this is a tiny improvement and overall you've done a great job 👍

  Marked as helpful

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @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!

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @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.

  Marked as helpful

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @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!

  0

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @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)

  Marked as helpful

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @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!

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @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.

  Marked as helpful

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @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.

  1

  

  Rafal•1,395

  @grizhlieCodesPosted almost 3 years ago

  @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 😁

  Marked as helpful

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

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

  1