Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
I’m using woocommerce germanized on our website myroastery.de and the second and third part of the checkout were totally positioned on the left side of the screen making the whole thing look bad.
Now I added the following code to with the CustomCSS Plugin (thx for this great tool)
#order_review.order-review.woocommerce-checkout-review-order {
margin-left: 200px;
margin-right: 200px;
}
#place_order.button.alt {
margin-left: 250px;
}
It looks well on Desktop now but screws up the mobile view.
I don’t understand how to properly add a media quiery as everything I tried failed.
Do you have any idea?
Many thanks for your kind support!
Hi Karenarabica
You can add a media query to the above CSS by simply prepending:
@media (min-width: 768px) {And then append a right brace on the last line to close the media query:
All up, your CSS will look like this:
@media (min-width: 768px) { #order_review.order-review.woocommerce-checkout-review-order { margin-left: 200px; margin-right: 200px; } #place_order.button.alt { margin-left: 250px; } }For a more technical explanation on how to use media queries, please refer to this MDN doc.