This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Media Quiery for Mobile

Open 1 reply developerpluginplugin-siteorigin-css
karenarabica
8 years ago · Last reply by Alex S 8 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

1
  1. Alex S Staff 8 years, 9 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread