Hero image to fit full screen

  • ilan76

    (@ilan76)


    3 years, 7 months ago

    Hi,

    I’m trying to create a Hero image that can always fit the entire screen with same scale, no matter which size the screen – exactly like Tesla site:

    https://www.tesla.com/models

    If you zoom in or zoom out the image always fit the entire screen with exact same scale.

    How can you set it with Gutenberg?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • hannah

    (@hannahritner)

    3 years, 7 months ago

    Hi,
    I recommend using the Row Layout Block from Kadence Blocks. It allows you to set fullwidth images for your rows. https://www.kadenceblocks.com/row-layout-block/
    Hope it’s helpful!

    Best,
    Hannah

    Thread Starter ilan76

    (@ilan76)

    3 years, 7 months ago

    Thanks @hannahritner, I tried that but I cannot set it up to behave like in Tesla site – on different screen sizes the images always cover the entire screen with same scale, even if I zoom in or out.

    hannah

    (@hannahritner)

    3 years, 7 months ago

    I understand now. I think the closet built-in option is to adjust the Min Height
    under the Row Layout Block Structure Settings. You can set a different height for desktop, tablet, and mobile. Would this work for you?

    Kindly,
    Hannah

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Hero image to fit full screen’ is closed to new replies.