Override original CSS with media query - css

Question

I created an article header css code, from a post, I got solutions to how to fix the header from overlapping by changing
#Article_Header2 {
height: 48px;
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}
to
#Article_Header2 {
min-height: 48px;
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}
Changing to min-height: 48px works perfectly for mobile but doesn't work for desktop. I would like to change that to only apply when it's on a mobile device.
May I ask where am I going wrong. I tried the folling.
#media (max-width:767px) {
body #Article_Header2 {
min-height: 48px;
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}
}
When that's applied, the min-height is applied to desktop as well. I'm wondering how can I set min-height: 48px only on mobile and set height 48px on anything else.

Answer 1

Since height and min-height are different properties, one doesn't overrides the other.
#Article_Header2 {
font: normal normal normal normal 16px / normal 'Roboto Condensed', sans-serif;
margin: 0px;
}
#media (min-width:768px) {
#Article_Header2 {
height: 48px;
}
}
#media (max-width:767px) {
#Article_Header2 {
min-height: 48px;
}
}