שינוי עיצוב בתבנית פירמה

עם מיקום הלוגו הסתדרתי
אשמח לקבל תשובות על השאר

1. לא הבנתי איפה אני מכניסה את:
@media (min-width:768px) { }

לדוגמא אני רוצה לשנות עיצוב כפתור הוסף לסל- הכנסתי את הקוד הבא:

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.button, .add_to_cart_button, .product_type_simple, .woocommerce .cart .button, .woocommerce .cart input.butto, woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
    background-color: #a7863f !important;
    border-color: #a7863f !important;
    color: #fff !important;
    font-size: 1em !important;
    height: auto !important;
    padding: 15px 25px !important;
	border-radius: 0 !important;
    transition: all 0.5s ease 0s;
	float: center !important;
	margin-top:0px !important;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .cart .button:hover, .woocommerce .cart input.butto:hover, woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce #content input.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page #content input.button.alt:hover .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
 background-color: #876620 !important;
    border-color: #876620 !important;
    color: #fff !important;
	}

איפה אני מכניסה את זה: @media (min-width:768px) { }

2 . בקשר לקוד שאינו עובד
גילתי שבעצם מה שאני מטמיעה בקובץ css משפיע רק על ה:דסקטופ
וכשאני ב live css זה משפיע גם על המובייל
כך זה צריך להיות?

יש לי ידע בכתיבת css, אבל אף פעם לא הגדרתי שונה בין מובייל לדסקטופ
ואני לא מבינה איך מכניסים את ההגדרות לקוד שכתבת:@media (max-width:768px) { }
כלומר איפה אני מכינסה את האלמנט שעליו אני מעונינת לתת את העיצוב
לדוג' אני מעונינת לכתוב את הקוד הבא למובייל בלבד:
.button{background-color: #a7863f !important;}
איך אני עושה זאת