Force layout on Woocommerce product page - css

Question

I am using the woocommerce order builder plugin on the shopkeeper wp theme.
in the default advertised look, the order builder should take over the product page making it easily legible but this theme seems to have its own rules.
instead of the full page, I get the woocommerce placeholder image on the left of the page and the order builder squeezed into the right side making it hard to comprehend what you are ordering.
I read somewhere I need to "use CSS to force the element you want into correct positions and display" but don't know how to go about it.
your help is sorely needed.

Answer 1

Big caveat: I think you're much better off editing the HTML here - removing the section you don't want and adjusting the column styling classes on the part you want to widen. Hooks can provide a clean way to do this, or you can override template files: https://docs.woocommerce.com/document/template-structure/
But, in the interest of getting you a quick (albeit hacky) fix, here's some CSS for you:
.product_content_wrapper>.row>.large-6.medium-12.columns {
display: none;
}
.product_content_wrapper>.row>.large-4.xlarge-5.xxlarge-5.large-push-0.columns {
width: 100% !important; /** This is the really hacky part**
}
This could have unexpected and unintended results in the long term, because, although it is as precisely targeted as possible, it is re-styling helper classes in unintended ways.