Mobile struggles

Hi there,

Is it possible to have the layers container expand automatically to include all options within the layer and move the window to the selected layer?

Could you explain this a bit more? I don’t fully understand what you mean.

Could you share the URL of the product in the screenshots? (you can send the link from this form if you would rather not post it here)

Marc

Thank you for sending the link.

There is an issue with some of the custom CSS which was done to adjust the mobile appearance:

@media (max-width:660px) {
    .form-cart {
        flex-direction: column !important;
        margin-top: 200px !important;
    }
}

This results in the footer element overlapping the layers, blocking the scrolling on that section or pressing anything in that area (see screenshot below)

I would suggest changing the mobile specific CSS to the following:

@media (max-width:660px) {
    .mkl_pc .mkl_pc_container footer {
        height: 120px;
    }
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar {
        bottom: 120px !important;
        top: 40%;
    }
    .mkl_pc .mkl_pc_container .mkl_pc_viewer {
        bottom: 60%;
    }
    .form-cart {
        flex-direction: column !important;
    }
    
    .mkl_pc .mkl_pc_container footer .form.form-cart .pc_configurator_form {
        flex-direction: row;
    }
    
    .configurator-add-to-cart {
        font-size: 18px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .pc_configurator_form {
        align-items: end !important;
    }

    .quantity {
        width: 40% !important;
        float: right !important;
    }

    .pc_configurator_form form.cart {
        display: block !important;
    }
    .footer__section-right {
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding: 10px;
    }
    .pc_configurator_form {
        margin-top: 10px !important;
    }

    .mkl_pc .mkl_pc_container .extra-cost.show {
        display: none !important;
    }
}

which should give the following:

First off, thank you for taking the time to look into this matter. I copied the css code you posted and refreshed the mobile site and this was the result:

My goal is to always have the layers fit within the container without the mobile user having the side scroll bar. Thank you in advance for your help.

Hi there,

The CSS I sent you is not present on the site, the old one is still there.
So either it was added in the wrong place, or caching needs to be purged.