Social proof section (HTML and CSS)

Community feedback

• 

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  here is where I tried (https://www.frontendmentor.io/solutions/huddle-landing-page-with-a-single-introductory-section-xtmdDUtu9#feedback) in this challenge, on the font size of the title

  1
• 

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  Again, looking pretty strong! I'll probably nit-pick and will focus on concepts more than actual code.

  Lets go with a list?

  1. **Avoid using height. If you want to use height I recommend min-height. **

  Why? GREAT QUESTION! The concept here is simple: we want to let the content decide how large a container is. When we write CSS we are working with alot of unknowns: What is the screen size of the user's client? What browser and what version are they using? Do they prefer darkmode or default? Etc.

  This gets into the core of FRONT END web development: we don't want to create pixel-perfect styling for the content. We want to create adaptable content that is responsive. You actually did really well in this regard, but like all of us a few improvements here and there will just carry you further!

  Back to the height.

  Lets say, for whatever reason, our user's display is 200px wide. And lets say your .review card is responsive in width. The content will not fit in the .review container! You'll see the .star-icon's breaking out of the container on the top. Why? height: 62px (you should be using 6.2rem btw, keep it consistent 😁)! The height will break it. Instead you could use min-height: 6.2rem and voila. Now the content is responsive on ultra-thin displays.

  Lesson: Don't use height as we simply don't know the users display etc. Allow content to rule the height and allow the browser to recalculate everything for you.

  This is mega important I think so ask me questions if I failed to explain it.

  2. What if the user, for whatever reason, is using a very wide display, lets say 34"+?

  Another responsiveness lesson: the background image you are using will be tucked away in the depths of the far-left-top corner of the users display. I have a 49" display and so it's very simple for me to test this. You could test it by zooming out whilst building your projects.

  The fix is rather simple too, one line of code to body:

  body {
          background-position: right 66vw top 0%;
  }
  

  This should be un-intuitive. If we want the background to be in the left why are we using right?? I've no clue how the math works unfortunately. But this keeps the image relatively 'centred'. If you tried doing this with left it would mess it up and it would at some point be located outside of the viewport. Depths of CSS I've not yet covered...

  3. Be brave with UI

  I'm really only talking about you being comfortable at judging when something is too small/large and just making an 'executive-decision' to change it.

  Lets take the .review card again. I think that during the mobile -> desktop transition it becomes too wide, taking up WAY more space than it needs to.

  4. Continuing point 3 but introducing clamp

  Lets use clamp for this to declare a min, optimal and max widths:

  .review { 
        /* other code*/
        width: width: clamp(22rem, 50vw, 41rem); 
  }
  

  I'm pretty sure if you removed ALL other widths associated with .review this code would be sufficient. To understand clamp check this video out.

  You can use clamp for anything tbh. Font size, width, padding, margin, name it. It allows you to easily write responsive measurements depending on a the screen width.

  Once you have played around with clamp you can use this tool I built to get the EXACT clamp code you need. Don't use it now, it wouldn't make much sense (yet). I'm not brilliant with math so the math I took from someone else 😅.

  If you use SASS then you can use this SCSS code as a function. If you don't use SASS yet, don't worry about it.

  $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);
    }
  }
  

  As an example of what the above code would do:

  /* If we type this in SCSS /*
  div {
      padding: fluid(tablet, 2, 4);
  }
  
  /* it will output the following CSS */
  
  div {
      padding: clamp(2rem, 1.0458015267rem + 2.5445292621vw, 3rem);
  }
  

  So our padding will be a minimum of 2rem (starting at around 375px). And it will grow with every pixel of increased viewport-width until it reaches 3rem.

  Magic 🧝‍♀️✨.

  I think that's enough. I could blab on but it'd be less and less useful lol. Hope you get something out of this.

  1. Avoid setting height, set min-height if you must.
  2. Think of very small AND very large displays before you finish a project and implement tiny styling fixes.
  3. Challenge designed/your own UI. As an obvious example, a single word with font-size: 1rem shouldn't have padding: 10rem.
  4. Clamp baby!!! ✨🤩

  Edit

  Oh yeah. I noticed you were using max-width for your media queries. Generally this means you designed the Desktop version of the page first, is this correct?

  Either way, the best practice is to code the mobile version first and use min-width for media queries.

  The logic is quite simple too. A mobile page is easier to code and it gives your a MVP (minimum viable product). It's usually a simple, single column, layout that you can then easily style etc.

  As you increase in screen size, you have more real-estate to work with. Then we add complexity, you see this in designs often I'm sure. Things get more interesting for desktop sizes.

  And generally speaking it's easier to do the SIMPLE first and then add complexity. Because if we start with desktop, we are starting with complexity and then are trying to simplify it, this is often much more difficult than the alternative approach.

  1

  ---

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes Hi Rafal, Thank you for your awesome tips... I had a break, so I just came back today to start with your awesome comment! Thanks a lot.

  • For the height, in this design it was already done before reading your previous comment, but now I am staying away from setting heights.
  • for the clamp I really tried hard, I also used your app that you sent me but still doesn't give me the result that I want for the min font-size that I want, it was really stressful, but I didn't get the wanted result, I tried in a new challenge that I did today but it just didn't work, and found it hard to control it.
  • for the SASS I just hear about it, I don't if I am ready to read about it and start using it? what do you think?
  • for the mobile-first workflow, as you said I just feel like starting with the complex things will be easier, but I never started with mobile first, bcz I feel that from complex => simple is more easier for making responsive... But I am going to start applying this tip starting from my next design and see how I feel about it

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @errazakallah31 I'll reply point by point

  Heights - awesome! Am working on making a video covering the core concepts of sizing and layouts but also learning video editing so it'll take a while hehe. But that's great that you're avoiding setting heights, sort of crucial for responsivity.

  Mind you, setting min-height is actually ok in some cases. Really depends on your solution and the design in question.

  Clamp

  Why don't you share some of your clamp code and then explain the issue? Might be something simple I could help with.

  SASS

  No rush with this one. Once you go SASS you won't look back to vanilla CSS but covering vanilla CSS till you're comfortable with it makes more sense. Just focus on core concepts and best practices for now (IMO).

  Mobile first

  I used to think the same as you in this case. I didn't understand why I'd start with mobile first but over time and having tried both approaches I can comfortably say that adding is much easier than subtracting. It's as simple as that I think.

  A mobile layout gives you a 'minimum viable product' as well. Meaning that a mobile layout can work on desktop but desktop can't work on mobile. I'm not saying the mobile layout would look amazing on desktop but it would work.

  I think that when looking back on any internal strife and resistance I had towards some ideas mentioned above is explained by our nature: resistance to change. I struggle changing my mindset on anything tbh. Recently I've been trying to think of my brain more like a software repo. Any idea can be replaced by an idea that seems better.

  Either way - my only recommendation for any suggestion you hear/see, just try it, play around with it in codepen, if it doesn't work for you, then that's fine. Perhaps it wasn't explained well, or perhaps it truly doesn't work.

  Mobile first and min-width are industry practices for a reason and I simply happen to agree with said reason. Then again React is the industry standard and I personally prefer Svelte so who knows 🤷‍♂️

  Let me know about that clamp issue please, I reckon that I can help.

  1

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes Everything is understood thank you very much... for the clamp I used this : font-size: clamp(2.4rem, 4.5818rem + -5.8182vw, 4rem); I expected the minimum which is 2.4rem at 375px, (btw, I tried many (2.4rem, here, 4rem), but it doesn't work

  1

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @errazakallah31 Gotcha. Just had a look.

  Use this little thing I put together: link.

  You'll see that the default options give us: clamp(2rem, 0.5714rem + 3.8095vw, 4rem);. This is already pretty close I think to what you're trying to accomplish?

  This is closer to what I would have expected to see, but yours had that minus, which sometimes makes sense but it didn't in this case.

  0

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes Yes, but not as I expected! do you use it often at your projects?

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @errazakallah31 More and more with time. You don't NEED to use it. But if it doesn't break any design, you might as well. As per usual I advise letting the browser to the heavy work. If I can achieve something in 1 line that would otherwise take me 10 lines (including media queries) I will opt for the shorter way 😁...

  There's also min, max to check out. Overall I just stick to clamp but min and max are also awesome to use.

  1

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes Yes I agree

  0

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes PLease, I want to ask you how do I use rem method that u gave me while using bootstrap, when I use bootstrap the font-size 62.5% doesn't work, so do u have an idea how to fix it?

  0

  

  Rafal•1,395

  @grizhlieCodesPosted over 3 years ago

  @errazakallah31 Sorry, I don't use bootstrap. (Don't recommend it either as you simply learn less in my opinion.) And it's probably not really as necessary as it used to be since grid/flex are here now. Bootstrap's main selling point to my understanding was in layouts.

  I'm sure some forums have an answer for you though?

  0

  

  (Rezzak) MOHAMED ERRAZAK ALLAH•170

  @Rezzak48Posted over 3 years ago

  @grizhlieCodes Yes, that's true but for companies it is a required thing since it save them time = money, so they do everything with it, and it is important... Yes I will look for it... thank you

  0