Jump to content
DinhoPHP

Header ultrapassando Body

Recommended Posts

Estou com o seguinte problema.

Desenvolvi um site em flex box com width de 100% na Section.  O problema é que o header com 100% fixed ultrapassa a section ficando mais larga que tudo na página no modo mobile mesmo utilizando break points.

 

@media screen and (max-width: 984px){

    header{
    background-color: #1a1a1a;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 999;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space--around;
    line-height: 6;
    font-size: 0.8em;
    }

}

 

Sem Título-2.png

Share this post


Link to post
Share on other sites

ola ja tentou acessar seu site pelo celular? estive com mesmo problema resolvi inspecionando regra por regra na css.

no chrome onde voce está visualizando aparece este bug, mas pelo celular não aparece. aconselho a tu inspecionar regra por regra na tua pagina toda. cria um backup do seu css original e vai adicionando as regras de cada vez. não é o mais aconselhavel mais funciona vai na minha  que vai dar certo, é algum elemento html que está ocorrendo este bug.

O erro pode estar no menu ou algo do tipo

.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By EdPaulino
      Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no  computador, o que deve-se fazer pra forçar-lo a se adaptar?
       
      segue codigo:
       
      <!--
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu RESPONSIVO</title>
          
          <!---<link rel="stylesheet" href="style.css">-->
      </head>
          <style>
              *{
                  margin: 0;
                  padding: 0;
               }
              
              .menu{
                  width: 100%;
                  height: 50px;
                  background-color: #f0f0f0;
                  font-family:'Arial';
              }
              .menu ul{
                  list-style:none;
                  position: relative;
              }
              .menu ul li{
                  width: 150px;
                  float: left;
              }
              .menu ul ul{
                  position: absolute;
                  visibility: hidden; 
              }
              
              .menu ul li:hover ul{
                  visibility: visible;
                  display:block;
              }
              .menu a{
                  text-decoration: none;
                  display: block;
                  padding: 15px;
                  text-align: center;
                  background-color: #f6f6f6;
                  color: #000;
              }
              .menu a:hover{
                  background-color: #f4f4f4;
              }

              .menu ul ul li{
                      float: none;
                      border-bottom: 1px solid #000;
              }
              .menu ul ul li a{
                      background-color: #f0f0f0;
              }
              label[for="bt_menu"]{
                          padding: 5px;
                          background-color: #d0d0d0;
                          font-family: 'Arial';
                          text-align: center;
                          font-size: 30px;
                          width: 50px;
                          height: 50px;
              }
              
              #bt_menu{
                  display: none ;
              }    
              label[for="bt_menu"]{
                          display: none;        
              }
          @media (max-width: 800px){
                  label[for="bt_menu"]{
                          display:block;
                          margin-left: 0;        
                  }
                  #bt_menu:checked ~ .menu{
                      margin-left: 0;
                      display: block;
                  }    
                  
                  .menu{
                      margin-top:5px;
                      margin-left: -100%;
                      transition: all .4s
                  }
                  .menu ul li{
                      width:100%;
                      float: none;
                  }
                  .menu ul ul{
                      position:static;
                      overflow: hidden;
                      max-height: 0;
                      transition: all 2s;
                  }
                  .menu ul li:hover ul{
                      height:auto;
                      max-height: 200px;
                  }
                          
          }    
          </style>
      <body>
          <input type="checkbox" id="bt_menu">
          <label for="bt_menu">&#9776;</label>
                 <nav class="menu">
                      <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Serviços</a>
                  <ul>
                  <li><a href="#">Criação de Sites</a></li>
                  <li><a href="#">Artes Visuais</a></li>
                  </ul>
              </li>
              <li><a href="#">Cursos</a>
                  <ul>
                  <li><a href="#">Java</a></li>
                  <li><a href="#">Photoshop</a></li>
                  <li><a href="#">HTML/CSS</a></li>
                  </ul>
              </li>
              <li><a href="#">Contato</a></li>
              </ul>
                  </nav>
      </body>
      </html>
       
      --->

    • By s3c0
      Olá pessoal,
       
      peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação.
       
      Segue abaixo:
       
      * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; }  
      <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul>  
      A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer.
       
      Alguém consegue me explicar o que está de errado?
       
      Agradeço a atenção de todos!


    • By danicarla
      OI gente, gostaria de de ideias de como posso desenvolver um player que tenha mais de uma faixa...

      Algo semelhante a isso: https://www.karaoke-version.com/custombackingtrack/u2/beautiful-day.html
       
      Alguém tem alguma idéia de como fazer?
    • By israel@iproduce.com.br
      Olá,
      Boa noite!
      Tenho algumas vagas para motion (basicamente banner de internet animado e vinhetas para redes sociais) para a cidade do Rio de Janeiro. As vagas são temporárias (6 meses), podendo ocorrer a efetivação nesse período. É necessário estar alocado no escritório no Rio.
      Conhecimento avançado em: Adobe Animate CC, Google Web Designer, After Effects.
      Além destes programas é um diferencial conhecer a linguagens: HTML5, CSS3 e Javascript.
      Tem interesse ou conhece alguém que esteja precisando? Então manda o seu portifólio e CV para no e-mail: freela@iproduce.com.br
      Boa sorte!
    • By Ewfc2005
      Gostaria de saber como eu devo fazer para alinhar 3 imagens lado a lado, sem fazer o site deixar de ser responsivo.
      que fique igual ao desse site
       
      https://ciesalon.com/
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.