Using vw and vh

Hi there,

thats a hard one for us to answer.
And its not doable via the UI in GP or GB. You would have to build your own custom CSS.

Most relative unit builds i have been involved in, don't work with vw units in that way. They build out with REM - something which you can set for the base HTML element in typography.

For example:

html {
    font-size: 10px;
}

Now 1 REM = 10px

Then you can define font sizes, spacing etc in REM units.

And you can adjust the REM value according to screen size for it then to adjust everything to suit.

First of all, thank you for answering. I will use this for fonts i guess but i have a use case where this wont work.
I attach an image of figma, where an image is cutoff at the edge of the screen (1440px) but wont be cutoff on a fullhd display. So i thought i make a website 100vw in width and convert the figma pixel values in vw/vh. So if i have 162px padding for the container, this would give me 11.25vw instead. Would this work, even if have to do this by myself in the custom css?

https://postimg.cc/nCtn0r2N

Aah ok.
That layout can be a bit of a head scratcher. And that method will probably cause you headaches with overflow.
I would start with a Full Width Content container page in GP. And then build out with GB Container, Grid and Image Block.

Start a new blank full width page.
Switch to Code Editor view ( 3 dot menu in top bar ).

Paste this code in:

<!-- wp:generateblocks/container {"uniqueId":"9cc33856","paddingTop":"100","paddingBottom":"100","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"50vw top","size":"contain","repeat":"no-repeat","attachment":""},"isDynamic":true,"blockVersion":2,"className":"has-breakout-image right"} -->
<!-- wp:generateblocks/grid {"uniqueId":"50f67c40","columns":2,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"871c7cd5","isGrid":true,"gridId":"50f67c40","width":50,"widthMobile":100,"minHeight":400,"backgroundColor":"var(\u002d\u002daccent)","isDynamic":true,"blockVersion":2} /-->

<!-- wp:generateblocks/container {"uniqueId":"0359979a","isGrid":true,"gridId":"50f67c40","width":50,"widthMobile":100,"borderSizeTop":"2","borderSizeRight":"2","borderSizeBottom":"2","borderSizeLeft":"2","borderColor":"var(\u002d\u002daccent)","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"aa0bbd41","sizeSlug":"full","borderColor":"var(\u002d\u002daccent)","className":"breakout-image"} -->
<figure class="gb-block-image gb-block-image-aa0bbd41"><img class="gb-image gb-image-aa0bbd41 breakout-image" src="https://picsum.photos/id/237/600/400" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

Switch back to visual editor.

NOTE:
1. The GB Container Block has the: has-breakout-image class. And has 100px top and bottom padding.
2. The left hand red column has a min height of 400px.
NB. Therefore the container in this case is a total of 600px in height. This relates to the CSS below.
3. The GB Image Block in the right hand column has the breakout-image class.

Now add this CSS to your site:

@media(min-width: 1024px) {
    .has-breakout-image .gb-inside-container {
        position: static;
    }

    .has-breakout-image {
        position: relative;
        overflow-x: hidden;
    }

    .breakout-image {
        position: absolute;
        left: 50%;
        top: 0;
        height: 600px; /* Matches height of Container Block */
        width: auto; /* leave width to resize organically */ 
        opacity: 0.75; /* i am here so you can see the containers behind image */
    }
}

Give that a shot

Thank you! I will give it a try!

Let us know how you get on :)