Large hero image hides text content

[Amoenus]

Steps to reproduce: In forestry.io add a new post with hero image with dimensions 944 × 630 pixels (intrinsic: 6016 × 4016 pixels) Add text with about 300 words

Expected result: Hero image and text content correctly spaces

Actual result: Hero image overlaps the text content

[lukesaints]

I had same issue. Fixed it by changing values: assets/scss/article.scss:

.article-hero-image {
    position: relative;
}

but after that left read indicator made huge space between text and image, so modifing it should fix that problem

assets/scss/progress.scss:

.aside-container {
max-width: 20px
position: fixed
}

[camilomazo]

Thanks @lukesaints that worked for me

[Chachu1]

I tried the same fix, unfortunately didn't work for me? I'm still having the same issue.

I did make the change in the assets/scss/article.scss: now it looks like this

.article-hero-image{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 944px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
      0 18px 36px -18px rgba(0, 0, 0, 0.22);
            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2),
      0 18px 36px -18px rgba(0, 0, 0, 0.22);

    img{
        width: 100%;
    }

    /*DESKTOP MEDIUM*/ 
    @media screen and (max-width: $desktop_medium){
        position: relative;
    }

    /*TABLET*/
    @media screen and (max-width: $tablet){
        max-width: 100%;
    }

    /*PHABLET*/
    @media screen and (max-width: phablet){
        margin: 0 auto;
        width: calc(100vw - 40px);
        height: 220px;

        & > div {
          height: 220px;
        }
    }
}

[jazzi]

I still have the same issue.

It's a new website and using Hugo Module, tried two times.

Then I tried git clone https://github.com/forestryio/hugo-theme-novela.git And found the values still not changed, so change it manually and problem solved.

But isn't this commit merged already? Anyway, thanks @ryanjbartley for solution.

[DustinJSilk]

This issue is because the image is expected to be a fixed height that matches the height of the sticky progress bar on the side.

The best way to fix it is to resize the image. This is how it should be done, if you dont mind some cropping of the image:

.article-hero-image {
  height: 425px;
  overflow: hidden;

  img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }
}