Blog preview card - mobile first

Community feedback

• 

  P

  Bamo-D-Abdallah•280

  @Bamo-D-AbdallahPosted 4 months ago

  It is perfect, but try to avoid using px, instead use rem, em, %, vw, and vh.

  0

  ---

  

  arjumand07•40

  @arjumand07Posted 4 months ago

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

  0

  

  P

  Bamo-D-Abdallah•280

  @Bamo-D-AbdallahPosted 4 months ago

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

  1