Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Section sobrepondo a outra no responsivo

Olá. Preciso muito de uma ajuda que é a seguinte! Possuo uma bolsa de iniciação científica da minha universidade. Estou construindo um site para um congresso da pesquisa. O que está acontecendo é que Quando a tela diminui, a section acima das datas que estava em três colunas ocupa muito espaço para baixo, ficando com as colunas uma embaixo da outra, e aí a section de baixo não é empurrada para baixo, ela continua no mesmo lugar e a section de cima sobrepõe ela. Vou colocar abaixo o código das duas sections:

O site é exatamente esse link abaixo: Se diminuir a tela irá ver o que disse.

http://iwssip2020.ic.uff.br/model/

<section class="text-center d-flex">
        <div id="keynotes" class="container">
            <div class="row">
                <div class="col-sm text-center">
                    <img class="mt-5" style="height: 100px; width: 100px;" src="img/circulo.png" alt="">
                    <h4 class="my-3 text-light">Dorina Popovici</h4>
                    <p class="text-light texto">- University Politehnica of Bucharesti, Romania -</p>
                    <p class="text-justify text-light texto">IWSSIP (www.iwssip.org) is an international conference on theoretical, experimental and applied signal processing. IWSSIP 2019 will be held in Osijek, Croatia and it will follow the successful events previously held in Budapest, Manchester, Poznan, Zagreb, Bratislava, Maribor, Bucharest, Prague, Chalkida, Rio de Janeiro, Sarajevo, Vienna, Dubrovnik and London.</p>
                </div>
                <div class="col-sm text-center">
                    <img class="mt-5" style="height: 100px; width: 100px;" src="img/circulo.png" alt="">
                    <h4 class="my-3 text-light">Exemplo</h4>
                    <p class="text-light texto">- University Politehnica of Bucharesti, Romania -</p>
                    <p class="text-justify text-light texto">IWSSIP (www.iwssip.org) is an international conference on theoretical, experimental and applied signal processing. IWSSIP 2019 will be held in Osijek, Croatia and it will follow the successful events previously held in Budapest, Manchester, Poznan, Zagreb, Bratislava, Maribor, Bucharest, Prague, Chalkida, Rio de Janeiro, Sarajevo, Vienna, Dubrovnik and London.</p>
                </div>
                <div class="col-sm text-center">
                    <img class="mt-5" style="height: 100px; width: 100px;" src="img/circulo.png" alt="">
                    <h4 class="my-3 text-light">Elhadj Benkhelifa</h4>
                    <p class="text-light texto">- Stafforshire University, UK -</p>
                    <p class="text-justify text-light texto">IWSSIP (www.iwssip.org) is an international conference on theoretical, experimental and applied signal processing. IWSSIP 2019 will be held in Osijek, Croatia and it will follow the successful events previously held in Budapest, Manchester, Poznan, Zagreb, Bratislava, Maribor, Bucharest, Prague, Chalkida, Rio de Janeiro, Sarajevo, Vienna, Dubrovnik and London.</p>
                </div>
            </div>
        </div>
</section>

<!-- ################################## DATAS ############################################# -->

<section class="my-5 py-5">
    <div class="container">
        <div class="row" id="data">

            <div class="col-4 d-flex justify-content-center">
                <div id="primeira"></div>
            </div>

            <div class="col-4 d-flex justify-content-center">
                <div id="segunda"></div>
            </div>

            <div class="col-4 d-flex justify-content-center">
                <div id="terceira"></div>
            </div>

        </div>

        <div class="row my-5 py-5" id="data2">

            <div class="col-6 d-flex justify-content-end pr-5">
                <div id="quarta"></div>
            </div>

            <div class="col-6 d-flex justify-content-start pl-5">
                <div id="quinta"></div>
            </div>

        </div>
    </div>

</section>

<!-- ################################## FIM DATAS ############################################# -->
4 respostas

Bom dia,

Verifiquei o site http://iwssip2020.ic.uff.br/model/

Da uma olha na sua ID "keynotes"

O CSS está assim:

@media (max-width: 600px)
    #keynotes {
        margin: 20px;
        height: 900px;

Retire o height ou muda para 100%.

solução!

Caramba. Muito obrigado Steve! Eu retirei essa id. Ela não servia mais, eu fui mudando o projeto e ela foi ficando. Ainda tenho que aprender a me organizar com as mudanças que vou fazendo no site, acho que o git pode ajudar né? Eu já uso, mas talvez não esteja usando corretamente. Me ajudou muito!!!!!

Por nada.

Também estou aprendendo muito sobre como me organizar, tenho essa dificuldade também.

Uso muito o Inspecionar elementos (F12) para verificar esse tipo de situação, e até mesmo ali pode ser testado alteração.

No mais, em que eu faço é evitar o uso de estilo CSS em IDs, procuro usar em Classes, e quando uso Media Queries, uso em arquivo separado.

Exemplo de como usaria no seu projeto:

<!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
<!-- CSS EDIT -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">

Ótima dica Steve. Obrigadão!!!! Vou criar agora esse arquivo, isso vai me ajudar!