Multi step checkout

Hey @anthonyb04

Please try the following CSS.

form.woocommerce-checkout {
grid-template-columns: repeat(1, 1fr);
width: 50%;
margin: 0 auto;
}

Let me know if this works for you!

thanks Eduard,
unfortunately the form is still all left (I think due to the steps bar)
https://ibb.co/dc8BT1M

Hey @anthonyb04

Please integrate the snippet into the Additional CSS pane and ping me. I want to see if any of these attributes require an !important tag.

Thanks

its added ??

Hmm… extremely weird. Would you mind adding the !important tag to all of these attributes? Like this:

form.woocommerce-checkout {
grid-template-columns: repeat(1, 1fr) !important;
width: 50% !important;
margin: 0 auto !important;
}

The CSS is correct and should work, but it isn’t executed on that page for some reason, or its being overwritten.

Same I updated the code ??

O_o… this is definitely weird. The code I gave you should work just fine — https://ibb.co/bLvbhXC — notice the attributes for that in the lower panel.

Do you mind me asking, where are you integrating this snippet exactly? Do you have a cache plugin that might need cleaning?

Weird indeed,
I added it in the style.css into the theme editor

Hmm… can you try adding it into the Additional CSS pane of the Customiser?

awesome, works perfectly now, you are the best thanks @cteduard

Great!