Mobile version bootstrap maladjusted

Question

I have the following HTML structure

<!-- Page Content-->
<main class="page-content">

    <!--- Lojas --->
    <div id="lojas">
        <div class="col-md-5 text-left lojas-coperfarma">
            <div class="row text-left lojas-coperfarma-margin">
                <div class="row">
                    <h2 class="cronos-h2-padrao">Lojas <br>Coperfarma</h2>
                    <p class="base-p-padrao-14">A Coperfarma possui mais de 50 <br> lojas na região sul do país.</p>
                    <p class="base-p-padrao-14">Navegue ao lado pelas cidades <br> onde a Coperfarma possui lojas.</p>
                </div>
            </div>
        </div>

        <div class="col-md-7 text-left pesquisa-lojas">
            <div class="row">

                <form>
                    <div class="row form-group pesquisar-form-padding">
                        <select class="pesquisar-form col-xs-8">
                            <option>Selecione sua cidade</option>
                            <option>Foz do Iguaçu</option>
                            <option>Cascavel</option>
                            <option>Curitiba</option>
                            <option>Londrina</option>
                        </select>
                    </div>
                    <div class="row form-group pesquisar-form-padding">
                        <select class="pesquisar-form col-xs-8">
                            <option>Selecione seu bairro</option>
                            <option>Centro</option>
                            <option>Vila A</option>
                            <option>Fora da Cidade</option>
                            <option>Muito Longe</option>
                        </select>
                    </div>                              
                </form>

                <div class="row">
                    <div class="col-md-5" id="resultado-farmacia">
                        <h4>Foz do Iguaçu</h4>
                        <h6>Endereço</h6>
                        <p>
                            Avenida JK 3365<br>
                            CEP: 85852-000 <br>
                            Cidade: Foz do Iguaçu <br>
                            Telefone 1: (45) 3525-5111 <br>
                            Telefone 2: (45) 3525-5111 <br>                                     
                        </p>
                        <h6>Horário de Funcionamento</h6>
                        <p>
                            Seg. à Sex. Das 08:00 às 19:00hs. <br>
                            Sábados das 08:00 às 22:00hs.
                        </p>
                    </div>
                    <div class="col-md-5" id="resultado-farmacia">
                        <h4>Foz do Iguaçu</h4>
                        <h6>Endereço</h6>
                        <p>
                            Avenida JK 3365<br>
                            CEP: 85852-000 <br>
                            Cidade: Foz do Iguaçu <br>
                            Telefone 1: (45) 3525-5111 <br>
                            Telefone 2: (45) 3525-5111 <br>                                     
                        </p>
                        <h6>Horário de Funcionamento</h6>
                        <p>
                            Seg. à Sex. Das 08:00 às 19:00hs. <br>
                            Sábados das 08:00 às 22:00hs.
                        </p>
                    </div>                              
                </div>

            </div>
        </div>
    </div>

    <!-- Parceiros -->
    <div id="parceiros">

        <div class="container text-left">
            <h4>Alto nível de negociação <b class='parceiros-texto-padrao'>com parceiros</b></h4>
            <p>Possuimos parceria com as principais Indústrias e fornecedores do mercado para garantir uma ótima compra a nossos associados.</p>

            <ul>
                                            <li class="parceiros-imagem"><img src="images/parceiros/parceiros-1.jpg" class="img-responsive"></li>
                                            <li class="parceiros-imagem"><img src="images/parceiros/parceiros-2.jpg" class="img-responsive"></li>
                                            <li class="parceiros-imagem"><img src="images/parceiros/parceiros-3.jpg" class="img-responsive"></li>
                                            <li class="parceiros-imagem"><img src="images/parceiros/parceiros-4.jpg" class="img-responsive"></li>
                                            <li class="parceiros-imagem"><img src="images/parceiros/parceiros-5.jpg" class="img-responsive"></li>
                                        </ul>
        </div>


            <div id="parceiros-depoimento">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tellus dolor, sagittis sed venenatis vitae, luctus sed leo. Sed purus eros, euismod quis erat quis, ornare pulvinar dolor. Duis ut lorem eu metus fermentum scelerisque a eget nisi. Sed eu nisl euismod, commodo justo commodo, viverra ex."</p>
            </div>                  
    </div>

    <!-- Page Footer-->
    <footer class="page-foot footer-default text-center text-md-left undefined">

        <div class="col-md-9 footer-redes">
            <div class="row">
                <div class="col-md-3">
                    <img src="images/logo-inversa.png" class="img-responsive">
                </div>

                <div class="col-md-9">
                    <ul>
                        <li>Nossas Farmácias</li>
                        <li>Central de Atendimento</li>
                        <li>Seja um Associado</li>
                        <li>Novidades</li>
                        <li>Estratégias da Rede</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">

                </div>

                <div class="col-md-9 footer-imagem-farmacia">
                    <center><img src="images/footer-farmacia-popular.png" class="img-responsive"></center>
                </div>
            </div>                      
        </div>

        <div class="col-md-3 footer-copyright">
        teste
        </div>

    </footer>
    <!-- {%FOOTER_LINK}-->
</main>

And the following CSS:

/* Seção - Lojas */

#lojas { 
    background-color: #FFCB08;
    height: 600px;
}

.pesquisa-lojas {
    height: 600px;
    background-color: #009CD9;
    padding-top: 50px;
    padding-left: 120px;
}

.lojas-coperfarma {
    background-image: url("../images/background-cidades.png");
    background-position: center;
    padding: 50px;
    background-size:100%;
    min-height: 600px;
    background-repeat: no-repeat;           
}

.lojas-coperfarma-margin {
    margin-left: 25%;
}

.cronos-h2-padrao {
    font-family: "CronosPro Bold";
    color: #333333 !important;
}
.base-p-padrao-14 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

/* Forms personalizados */

.pesquisar-form {
    padding: 20px;
    background-color: #FFFFFF;
    color: #009CD9;
    font-size: 18px;
    font-weight: 600;
    border: none;
    -webkit-box-shadow: 4px 3px 0px 0px rgba(50, 50, 50, 0.73);
    -moz-box-shadow:    4px 3px 0px 0px rgba(50, 50, 50, 0.73);
    box-shadow:         4px 3px 0px 0px rgba(50, 50, 50, 0.73); 
}

.pesquisar-form-padding {
    padding: 5px;
}
#resultado-farmacia {
    padding: 20px;
    font-family: Tahoma;
    font-size: 90%;
}

#resultado-farmacia p, h4 {
    color: #FFFFFF !important;
}

#resultado-farmacia h4 {
    color: #FFFFFF !important;
    font-size: 22px;
    font-weight: bold;
}

#resultado-farmacia h6 {
    color: #FFFFFF !important;
    margin-top: 20px;
    margin-bottom: -15px;
    font-weight: bold;
}


/* Seção - Parceiros */
#parceiros {
    min-height: auto;
    padding: 60px;
}

#parceiros h4{
    font-family: "CronosPro Bold";
    color: #009CD9 !important;
}

#parceiros p {
    font-size: 16px;
    font-family: tahoma;
    color: #333333 !important;  
        margin-top: 0px;
}

.parceiros-texto-padrao {
    color: #333333 !important;
}

.parceiros-imagem {
    float:left;
    width: 20%;
}

#parceiros-depoimento {
    margin: 50px;
    padding: 25px;
    background-color: #EDEDED;
    border: solid 1px #CCCCCC;
    border-radius: 10px;
    height: 170px;
}

#parceiros-depoimento p {
    font-family: "CronosPro Italic";
    color: #858585 !important;
    font-size: 22px;
}

.footer-redes {
    height: 300px;
    background-color: #009CD9;
    padding-top: 50px;
    padding-left: 120px;
}

.footer-copyright {
    height: 300px;
    background-color: #DDDDDD;
    padding-top: 50px;
    padding-left: 120px;    
}

.footer-redes li {
    color: #FFFFFF !important;
    text-transform: uppercase;
    float: left;
    margin-left: 10px;
    font-weight: bold;
    font-size: 11px;
    font-family: Tahoma;
    margin-top: 5px;
    text-align: left !important;
}

.footer-imagem-farmacia {
    margin-top: 30px !important;
}

In the browser, it works properly, but when I open it in mobile, it stays that way:

I took advantage and also put in the server, so that they can analyze better: http://www.codigo3.com.br/coperfarma

How can I resolve this issue? Since the desktop works just right?

Answer 1

A class . search-shops was with a fixed height value tries to use min-height.

.pesquisa-lojas {
  min-height: 600px;
  background-color: #009CD9;
  padding-top: 50px;
  padding-left: 120px;
}

same with #store id

#lojas {
    background-color: #FFCB08;
    min-height: 600px;
}