Remove "floating" non responsive div

Question

Remove "floating" non responsive div

Navigation

#1 by (1 votes)

1

I have the following HTML structure:

    <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>

But I've edited the css so that the div may fluctuate over the gmap div, and it works perfectly, the problem is that in the responsive, I can not get back, it's floating too.

CSS on the 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;
    }
}

Any option I put in position does not have any effect, but when I mute for example the background color works, then problem with selector is not.

html css

asked by anonymous 12.03.2018 / 19:47

1 answer

Carousel - arrows as pagination How to separate and manipulate select data with js

score 1 · Accepted Answer

Put !important into position . Bootstrap is "taking account" of div for having a native class. !important will overwrite Bootstrap CSS:

.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><scriptsrc="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>