Markdown post header-sizes get compiled wrong

[aleksati]

When adding headers in markdown, the biggest header should be "#" (H1) and then gradually smaller when adding more hastags until "###" (H3) which is the smallest header. However, on our blog, two hashtags correspond to the biggest header, for some reason:

There's probably something in the CSS that does this.

[aleksati]

I found the error. In the main.scss , the header sizes were configured from h2 to h4. It should be from h1 to h3. This is what was before:

.post-content {
  margin-bottom: $spacing-unit;

  h2 {
    @include relative-font-size(1.75);

    @include media-query($on-laptop) {
      @include relative-font-size(1.652);
    }
  }

  h3 {
    @include relative-font-size(1.375);

    @include media-query($on-laptop) {
      @include relative-font-size(1.25);
    }
  }

  h4 {
    @include relative-font-size(1.125);

    @include media-query($on-laptop) {
      @include relative-font-size(1.075);
    }
  }
}

This is what I changed it to:

.post-content {
  margin-bottom: $spacing-unit;

  h1 {
    @include relative-font-size(1.75);

    @include media-query($on-laptop) {
      @include relative-font-size(1.652);
    }
  }

  h2 {
    @include relative-font-size(1.375);

    @include media-query($on-laptop) {
      @include relative-font-size(1.25);
    }
  }

  h3 {
    @include relative-font-size(1.125);

    @include media-query($on-laptop) {
      @include relative-font-size(1.075);
    }
  }
}

[stefanofasciani]

I added another block in ".post-content" relative to the font size for headers h4 (if not they may result bigger/smaller than what they are supposed to be). Can you check if the h1 to h4 size is rendered correctly in the browser and if so, close this issue?

[aleksati]

Just tested and it looks fine on my side. Now we have these variations from H1 to H4 (just to document):

I will close this issue now.