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 bleszerd
      Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.
       
      Como podem ver até pela imagem, design não é meu ponto forte.
       
      Código do JSX (Componente do React):
      <div className="login-container"> <section className="form"> <form> <h1>Bem vindo!</h1> <input type="text" placeholder="Login" /> <input type="password" placeholder="Senha" /> <p>Possuo um Token</p> <input type="text" placeholder="Token" className="token-input" /> </form> </section> </div>  
      Código do CSS:
      .login-container{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 1120px; height: 100vh; margin: 0 auto; } .login-container section.form{ width: 100%; max-width: 350px; } .login-container section.form form{ display: flex; justify-content: center; width: 100%; max-width: 1250px; height: 100%; max-height: 700px; } .login-container section.form form h1{ color: #fff; font-weight: bolder; text-shadow: #1B182E 2px 2px 8px; font-size: 42px; margin-bottom: 32px; position: absolute; margin-top: -65px; background: transparent; } .login-container section.form form input{ display: flex; justify-content: space-between; margin: 5px; width: 180px; height: 40px; max-width: 100%; font-weight: bold; padding: 8px; border-radius: 5px; color: white; background: #0A0816; border: solid #0D0929 2px; } .login-container section.form form p{ } .login-container section.form form input + p + input{ background: black; border: solid yellow 2px; }  
      Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

    • By sander147
      Boa Tarde, estou com um problema ao por o menu ao lado direito, ele não fica alinhado com o campo de notícias, eu não faço ideia de como fazer eles ficarem lado a lado, alguém poderia me dar uma luz? eu estou seguindo um livro da casa do código mas os resultados não saíram iguais depois que eu fui além do livro. :/
      Deveria ficar assim:
       https://uploaddeimagens.com.br/images/002/561/267/original/menu.png?1585683825
       
      Ficou assim:

    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

    • By wsoalves
      Olá, eu estava mexendo em um Tema Wordpress, e no final do menu tem alguns ícones de social mídia que posso trocar selecionando em um biblioteca interna.
      Mas não tem o ícone do whatsapp para eu escolher
       
      Queria saber se tem alguma forma de trocar ícones assim no editor CSS colocando o Fontawesome no lugar por exemplo "<i class="fab fa-whatsapp"></i>"
       
      Obrigado!
    • By laloproces
      Boa noite. Estou estudo POO com PHP e fiz uma classe Pen.php. Inclui um echo com parágrafo nesse código que gostaria de alterar a cor da fonte de acordo com o atributo color da caneta. Pesquisei no Google e sugeriram fazer um arquivo php com as formatações, mas não obtive sucesso. Estou utilizando Apache como server local, última versão disponível do XAMPP. Mesma coisa para a versão do PHP. Segue o código dos arquivos:
       
      index.php
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="style.php" /> <title>POO Lesson 02</title> </head> <body> <div> <label id="model"></label> </div> <?php require_once 'Pen.php'; $c1 = new Pen(); $c1->model = "bic"; $c1->color = "blue"; $c1->charge = 80; $c1->tip = 0.5; $c1->capped = false; $c2 = new Pen(); $c2->model = "faber-castell"; $c2->color = "red"; $c2->charge = 50; $c2->tip = 0.75; $c2->capped = true; print_r($c1); echo "<br>"; print_r($c2); $c1->scribble(); $c2->scribble(); ?> </body> </html> Pen.php
      <?php class Pen { var $model; var $color; var $tip; var $charge; var $capped; function scribble(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is capped!</p>"; } else{ if($this->color=="blue"){ echo "<p style='color: blue;'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } else{ echo "<p id='c2'>I'm scribbling with the pen ".$this->model." ".$this->color." ...</p>"; } } } function cap(){ if($this->capped == true){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already capped!</p>"; } else{ $this->capped = true; echo "<p>The pen ".$this->model." ".$this->color." is capped!</p>"; } } function uncap(){ if($this->capped == false){ echo "<p>ERROR! The pen ".$this->model." ".$this->color." is already uncapped!</p>"; } else{ $this->capped = false; echo "<p>The pen ".$this->model." ".$this->color." is uncapped!</p>"; } } } style.php
      <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; } <?php header("Content-type: text/css; charset: UTF-8"); require_once 'Pen.php'; $c0 = new Pen(); $color = $c0->color; ?> c2 { color: <?php echo $color; ?>; }  
×

Important Information

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