CSS size of container based on content (inline)

At the moment .mkl_pc.opened is set that it takes 95% of the viewport as height (with a minimum of 500 px).

body.configurator_is_inline .mkl_pc {
    position: relative;
    height: 95vh;
    min-height: 500px;
    z-index: 1;
}

I made some modifications to align the image + choices to the top of the page.

.mkl_pc .mkl_pc_container .mkl_pc_viewer .mkl_pc_layers img {
    top: 0;
    transform: translateX(-50%);
}

.mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices {
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0;
  padding-top: 0;
}

This results in weird outputs on large desktop screens. On certain screen sizes there is a large white banner (the content doesn’t need 95vh.

Can anyone help me out on how to set the height based on the height of the content? The product configurator is placed on a page by using the provided shortcode.

Should I define the vh based on screensize? for instance:
– <660 px
– 661 px <> 900 px
– 901 px <

Penny for thoughts ??

• This topic was modified 3 years, 8 months ago by Wohoo123.
• This topic was modified 3 years, 8 months ago by Wohoo123.