Remove "floating" div in the responsive

Question

Remove "floating" div in the responsive

Asked 6 years, 8 months ago

Viewed 265 times

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 edited the css so that the div found it floating on the div Gmap, and it works perfectly, the problem is that in the responsive, I’m not getting back, it floats too.

CSS on 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 appear any effect, but when I change for example the background color works, so problem with selector is not.

Give a clear in the browser cache. Here in the tests the div was not floating.

– Sam

2018/03/12 at 19:03
@dvd nothing, I ran it in anonymous mode and same thing

– Igor Oliveira

2018/03/12 at 19:07
Here it worked normal, when it hits the 768px it changes from Absolut to Static, you can try to put ! Important to see if it works...

– hugocsl

2018/03/12 at 19:16

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-03-12T19:19:33+00:00

Place !important in position. Bootstrap is "taking over" the div for having a native class. The !important will overwrite the 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>
<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>