Search code examples
htmlcssviewport-units

Can I change the initial containing block size?


I am using vh and vw units to style certain elements of a page. It's all working well when the initial containing block and viewport are of the same size. This is what it says in the spec:

The viewport-percentage lengths are relative to the size of the initial containing block.

But this way vh and vw are not the size I want, so how can I change the size of the initial containing block so that my vh and vw units are relative to this new size?


Solution

  • The size of the initial containing block is always the same as that of the viewport. You can't change this size (except via the viewport meta tag, which probably isn't what you're looking for).

    @Pete Because my page is already styled in vh and vw units, and it's looking OK. But I wan't to fix the viewport size past the certain screen width, so that my design doesn't stretch.

    What you want to do is write a media query for when the screen exceeds a certain width, then replace all your dimensions that use viewport units with your desired values.