Bueno, creo que nadie supo.
Afortunadamente lo resolví. Les dejo la solución que encontré en caso de que alguien tenga el mismo problema.
El problema principal es que la clase ya tenía !important desde antes, por lo que el nuevo important ya no iba a tener prioridad.
Al parecer una de las reglas sobre prioridades de css es que entre mas especifico seas, mayor prioridad tienes. Entonces se me ocurrio poner algo asi:
Código:
@media only screen and (max-width: 320px) {
div.la_clase {
padding-right: 30px !important;
padding-left: 30px !important;
}
Y viola!! Funciona perfectamente. Definitivamente es una terrible práctica, pero no encontré otra solución. Lo ideal hubiera sido que inicialmente la clase no tuviera el elemento !important. En fin.
Saludos