Correct way to deal with teaser and header images in minimal-mistakes

Help
1

Hello,

I will start by saying it is a great theme. Now, to the problem:

I notice that theme will hide part of the teaser image ( if it is in a grid layout) if its aspect ratio is not 3 by 2. Same with a header image of a post - depending on how wide a monitor is, the top and the bottom of the image can be cut. Or the opposite - if the monitor is super wide, the header can take half screen of the monitor.

Is there a setting in yaml that can prevent me from this by forcing an image to be full size? Or a way to set max width or height of an image and filling the empty spice with color? There surely must be a better way then cutting images to custom aspect ration.

Thanks.

1 Like
2

Header images shouldn’t be hidden, see these example posts.

If you’re using a header with overlay the image is applied as a background, and can get cut. Overlay headers are dependent on the height of the content placed on top of it. Have a short title… It’s going to cause the parent container to have a reduced height.

3

Thanks for fast reply.

And what about teaser images?

4

For teaser images in the grid layout, they have a max-height set via CSS to keep everything uniform.

If that’s not to your taste you can remove these lines in /_sass/minimal-mistakes/_archive.scss.

.archive {
  .archive__item-teaser {
    @include breakpoint($small) {
      max-height: 200px;
    }

    @include breakpoint($medium) {
      max-height: 120px;
    }
  }
}
6

How would I do that if I don’t have all this ruby/jekyll/gem/… stuff installed locally but am using just GitHub’s build process for my GitHub Pages repository?

I just want teaser images in a grid layout (like on my blog’s homepage) to have a fix aspect ratio that doesn’t change in response to browser window size. The teaser images’ size however is allowed to change – but not the aspect ratio.

What aspect ratio and image size would be recommended in that case to have everything look good on smart phone displays, tablets and desktop screens of any size?

Thanks so much for this awesome theme, @mmistakes !!! :heart: