1

Tenho a seguinte estrutura HTML:

    <div class="container"></div>
<div class="card encontreundiade">
    <div class="card-body p-3">
        <form id="formcontato" class="p-0">
                <div class="form-group mb-2">
                    <label for="estado" class="mb-0">Estado</label>
                    <label for="selectestado"></label>
                    <select class="form-control " id="selectestado" name="estado">
                        <option>Carregando...</option>
                    </select>
                </div>
                <div class="form-group mb-1" id="selecionarcidadediv">
                    <label for="cidade" class="mb-0">Cidade</label>
                    <label for="selectcidade"></label>
                    <select class="form-control" id="selectcidade" name="cidade">
                    </select>
                </div>
        </form>
        <div id="listaunidades">
            <ul class="list-unstyled pt-1">

            </ul>
        </div>
    </div>
</div>
<div id="gmap" style="width:100%;height:75vh;">

</div>

Porem eu editei o css de forma com que a div encontreundiade ficasse flutuando sobre a div gmap, e funciona perfeitamente, o problema é que no responsivo, não estou conseguindo voltar, fica flutuando tambem.

CSS no pc:

.encontreundiade{
    width: 300px;
    position: absolute;
    z-index: 1;
    margin-top: 1rem;
    margin-left: 1rem;
    /*background: url("../imgs/fundo.png") left 50px no-repeat;*/
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
    max-height: 70vh;
}

CSS mobile:

@media only screen and (max-width: 768px) {
    .encontreundiade{
        width: 100px;
        position: static;
        z-index: 0;
        margin-top: 0;
        margin-left: 0;
        box-shadow: 0 0 0 0;
    }
}

Qualquer opção que eu coloquei no position não surge qualquer efeito, porem quando mudo por exemplo a cor do background funciona, então problema com seletor não é.

3
  • Da uma limpada no cache do navegador. Aqui nos testes a div não ficou flutuando.
    – Sam
    Commented 12/03/2018 às 19:03
  • @dvd nada, executei em modo anonimo e mesma coisa Commented 12/03/2018 às 19:07
  • Aqui funcionou normal, quando bate no 768px ele muda de absolut para static, vc pode tentar colocar !important para ver se funciona...
    – hugocsl
    Commented 12/03/2018 às 19:16

1 Resposta 1

1

Coloque !important nas position. O Bootstrap está "tomando de conta" da div por ter uma classe nativa. O !important irá sobrepor o CSS do Bootstrap:

.encontreundiade{
    width: 300px;
    position: absolute !important;
    z-index: 1;
    margin-top: 1rem;
    margin-left: 1rem;
    /*background: url("../imgs/fundo.png") left 50px no-repeat;*/
    box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
    max-height: 70vh;
}

@media only screen and (max-width: 768px) {
    .encontreundiade{
        width: 100px;
        position: static !important;
        z-index: 0;
        margin-top: 0;
        margin-left: 0;
        box-shadow: 0 0 0 0;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
ddvvddvvd
<br>
bsvdbvsdbvsdbvsdb
<br>
sdjsdgdsgjgdsjgds
</div>
<div class="card encontreundiade">
    <div class="card-body p-3">
        <form id="formcontato" class="p-0">
                <div class="form-group mb-2">
                    <label for="estado" class="mb-0">Estado</label>
                    <label for="selectestado"></label>
                    <select class="form-control " id="selectestado" name="estado">
                        <option>Carregando...</option>
                    </select>
                </div>
                <div class="form-group mb-1" id="selecionarcidadediv">
                    <label for="cidade" class="mb-0">Cidade</label>
                    <label for="selectcidade"></label>
                    <select class="form-control" id="selectcidade" name="cidade">
                    </select>
                </div>
        </form>
        <div id="listaunidades">
            <ul class="list-unstyled pt-1">

            </ul>
        </div>
    </div>
</div>
<div id="gmap" style="width:100%;height:75vh;">
dvdvdvvddvdvdvdvdv
</div>

1
  • Isso mesmo, mas tive que colocar !important em quase tudo Commented 12/03/2018 às 19:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .