Support » Plugin: Product Configurator for WooCommerce » 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 5 months, 2 weeks ago by Wohoo123.
    • This topic was modified 5 months, 2 weeks ago by Wohoo123.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Marc Lacroix

    (@marcusig)

    Hi there,

    Can anyone help me out on how to set the height based on the height of the content?

    Do you mean based on the height of the images?

    You may have to use a bit of Javascript to get the right dimensions all the time.

    Marc

    Thread Starter Wohoo123

    (@wohoo123)

    That’s it! Still messing around with css, but I guess only CSS won’t get the job done.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.