Checkout “Billing Details” Storefront Crashed

Hi there,

Would you mind elaborating a bit more on what you mean by the following:

the checkout area “billing details” crashes.

Are you seeing any fatal errors or is it a case of the layout not showing up as expected? The reason I’m asking is that when look at your checkout page, I’m seeing the following:

Link to image: https://cld.wthms.co/vTj1ho

If you’re referring to the broken layout: This is happening because your child theme OR another plugin is loading the bootstrap CSS framework which is adding its own custom CSS for column. To illustrate that better, have a look at the following screenshot:

Link to image: https://cld.wthms.co/JNC6Me

Hi @rk,

thanks for your reply and support.

I am referring to the broken layout, this is correct. In fact, I am using bootstrap which is not visibly in conflict with other Storefront elements.

Can you imagine a workaround for the “billing details” area? I tried to manually add -ms-flex: 0 0 8.333333%; as a style for col-1 but can not make it work.

Hey @anneklappe – that’s not causing the issue, it’s your maximum width that is:

If I change it to 100%, there’s no longer an issue:

/* Full-width billing details */

.col-1,
.col-2 {
    max-width: 100%;
}

Link to image: https://cld.wthms.co/bkKfma

Also, the flex value has no effect for these columns, so I’m not sure why you’re using them.

Hi @job,

thanks a lot, this was helpful and fixed the problems.

Great to hear that. I’ll mark this thread as resolved then. Have a great weekend!