css for mobile view

I changed my product page summary area to be further to the right using this css code:
.storefront-full-width-content.single-product div.product .summary {
padding-left: 6em;
}
now my mobile version is off! and when i go in and try to add @media only rule my css stylesheet rejects it. how do i fix this? I need to product pages on mobile device to be aligned properly.
hemingwayscatboutique.com

thank you.