Footer element do not descend using the bootstrap class when I open the menu in mobile mode

Asked

Viewed 156 times

0

In mobile mode is having problems when I open the menu as it collides with the buttons to pass images of Carousel and also with the footer

inserir a descrição da imagem aqui

CSS

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: auto;
  background-color: #0275d8;
}

I’ve tried using z-index: -1;

<div class="footer">
      <div class="container">
      <hr>
          <div id="aviso">  
            <div id= "posicaoaviso">
                <span id="fecharaviso" >&times;</span>
                <center><p><strong>Uso de cookies:</strong> Este site utiliza cookies para ajudar a disponibilizar os respetivos serviços e analisar o tráfego.<br>As informações sobre a sua utilização deste site são partilhadas com terceiros.<br>Ao utilizar este site, concorda que o mesmo utilize cookies.</p></center>
            </div>
        </div>
     </div>

Clicking here to view the site.

Either the problem’s on the footer or it’s on the carousel

html css bootstrap

  • substitute: width:100% for max-width:100% Would you like it to be responsive right? It’s inside a container and Row?

  • You’re still in trouble when I do that

  • It seems to be the class="Carousel slide" element, but I don’t understand why it overlaps with the class="footer"

1 answer

1


Corrected in this way

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 120px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 120px;
  background-color: #f5f5f5;
}

Browser other questions tagged html css bootstrap

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