Blog preview card - mobile first

@Bamo-D-Abdallah How do you figure out the required value for em, rem (relative units), do you just do hit and trial (like me) or is there a pattern/trick to do so?

@arjumand07 You can use a calculator to divide the px by 16, so to convert 360px to rem you divide 360/16 because 1 rem is 16px by default.

If you are using a preprocessor you can setup a function to do that:

// file name: _functions.scss
@use "sass:math";

@function toRem($px) {
  @if math.is-unitless($px) {
    @return math.div($px, 16) + rem;
  } @else {
    @error "Don't pass 'px' unit with the number";
  }
}


@function toEm($px) {
  @if math.is-unitless($px) {
    @return math.div($px, 16) + em;
  } @else {
    @error "Don't pass 'px' unit with the number";
  }
}

Now you can pass the pixel to the function and it will convert it:

@use "functions" as f

p {
  font-size: f.toRem(26);   //converts 26px to rem
}