Alteração de altura do banner - versão mobile e desktop

Layout
1

Fiz uma alteração na altura do banner usando esse código:

/* AREA DO BANNER */
.secao-banners .conteiner {
max-width: 100%;
margin-top: 10px;
padding: 0;
box-shadow: none;
left:0;}
.flexslider .slides{
height: 500px;}

Para a versão desktop funcionou perfeitamente, porém na versão mobile fica com um espaço em branco.
Alguém consegue me ajudar com um código para alterar a versão mobile, por favor?

2

Consegui fazer a alteração com duas condições (levou meu dia inteirinho pra conseguir descobrir uma forma de fazer)!

Vou inserir os códigos aqui para o caso de alguém quiser fazer as mesmas alterações, ou algo similar.

/* AREA DO BANNER */
@media only screen and (min-width: 767px) {
.secao-banners .conteiner {
max-width: 100%;
margin-top: 10px;
padding: 0;
box-shadow: none;
left:0;}
.flexslider .slides{
height: 500px;}

 @media only screen and (max-width: 767px) {

.secao-banners .conteiner {
max-width: 100%;
margin-top: 10px;
padding: 0;
box-shadow: none;
left:0;}
.flexslider .slides{
height: 162px;}

A primeira parte é para a versão para computador e a segunda para a versão mobile!