Gutenberg cover block

  • blazmate

    (@blazmate)


    5 years, 4 months ago

    I tried a cover block with image. The min height doesn’t make sense to me.
    It acts like a fixed height, not any min.

    What I want
    * on desktop, it becomes wider, but at most 2:1 say
    * on mobile, maybe some edges get cut off, but it’s still wide not square, like 4:3

    Instead what I see
    * desktop like 9:1, crazy unusable
    * mobile like square with sides cut off

    So I’m not sure how to set it up

    • This topic was modified 5 years, 4 months ago by blazmate.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Marty O’Connor

    (@martyoconnor)

    5 years, 4 months ago

    Minimum Height is set in terms of specific pixels on the Cover Block. As you expand the width of your viewport, the cover image will not reduce in height below the pixels that you’ve set.

    You may be able to use CSS to create that outcome. It sounds like you need to maintain an aspect ratio as you change the viewport size.

    Something like this:
    https://css-tricks.com/aspect-ratio-boxes/

    Thread Starter blazmate

    (@blazmate)

    5 years, 4 months ago

    I don’t want to keep exact ratio, but I want it to look similar.
    THe change from super wide to square doesn’t work for 99% of pics.

    It’s called ‘Minimum Height’ but whatever size viewport it’s that exact height. Nothing responsive about it.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Gutenberg cover block’ is closed to new replies.