Jump to content
SaraAlcaras

Tirar o zoom/ ampliação da tela com css

Recommended Posts

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

} 

Normal.JPG

ampliado.JPG

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 Luis Fernando R. Valle
      Estou desenvolvendo um site de vinhetas, mas estou com o seguinte problema. Quando o cliente clica em um áudio ele toca normalmente, mas quando clica em um segundo com o primeiro ainda em execução, ficam os dois áudios executando ao mesmo tempo no sit.
      Gostaria que um executasse por vez.
       
      Lembrando que os áudios estão inseridos separadamente.
    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By acneto.frc
      Tenho uma aplicação WEB NodeJs+Javascript. Na minha view (FILTROS PARA RELATÓRIO) além dos inputs tenho um radio button onde seleciono o tipo de do relatório que será gerado. No meu Controller tenho acesso aos campos inputs (type=text) normalmente mas não tenho acesso aos inputs (type=radio). Abaixo vou colocar parte do código.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags --> <title><%= title %></title> <link rel="stylesheet" type="text/css" media="screen" href="/estilos/estilos.css" /> </head> <body> <header> <nav class="menuBase"> <ul> <li><a href="/">Início</a></li> <li><a href="/estagio/relatorios">Voltar</a></li> <li><a href=""> </a></li> </ul> </nav> </header> <main class=frmRelFiltros> <ul class="nav nav-tabs"> <li class="active" id="home-tab"><a data-toggle="tab" href="#pagina1">Relatório de Contratos</a></li> </ul> <div class="tab-content"> <div id="pagina1" class="tab-pane fade in active"> <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> <!-- primeira linha --> <br> <div class="filtros" style="margin:15px"> <div class="row"> <div class="form-group col-md-6 col-md-offset-0"> <label>Código Contrato.:</label> <input type="text" name="cod_ini" value="0"/> A <input type="text" name="cod_fim" value="999999" /> <br> <br> <label>Ativo/Inativo...:</label> <input type="text" name="atv_ini" value="A"/> A <input type="text" name="atv_fim" value="Z" /> <br> <br> <label>Data Cadastro...:</label> <input type="text" name="cad_ini" value="01/01/2000"/> A <input type="text" name="cad_fim" value="31/12/2090" /> <br> <br> <label>Data Vigência...:</label> <input type="text" name="vig_ini" value="01/01/2000"/> A <input type="text" name="vig_fim" value="31/12/2090" /> <br> <br> <label>Sit. Contrato...:</label> <input type="text" name="sit_ini" value="0"/> A <input type="text" name="sit_fim" value="99" /> <br> <br> <label>Código do Curso.:</label> <input type="text" name="cur_ini" value="1"/> A <input type="text" name="cur_fim" value="99" /> <br> <br> </div> <div class="form-group col-md-6 col-md-offset-0"> <label>Código da Empresa.:</label> <input type="text" name="emp_ini" value="1"/> A <input type="text" name="emp_fim" value="9999" /> <br> <br> <label>Centro Integração.:</label> <input type="text" name="cie_ini" value="1"/> A <input type="text" name="cie_fim" value="999"/> <br> <br> <label>Valor da Bolsa....:</label> <input type="text" name="vlr_ini" value="1"/> A <input type="text" name="vlr_fim" value="99999999"/> <br> <br> <br> <div id="opcoesRelContratos" > <p>Selecione o Tipo do Relatório:</p> <input type="radio" id="tipoRel" name="padrao" value="padrao" checked=true> <label for="padrao">Padrao-Conferência</label><br> <input type="radio" id="tipoRel" name="faixa" value="faixa"> <label for="faixa">Faixa Salarial-Estatístico</label><br> <input type="radio" id="tipoRel" name="alunos_empresas" value="alunos_empresas"> <label for="alunos_empresas">Identificação de Alunos por Empresa</label> <br> <input type="radio" id="tipoRel" name="entregas" value="entregas"> <label for="entregas">Pastas de Estágios Entregues</label><br> <input type="radio" id="tipoRel" name="contratos_vencer" value="contratos_vencer"> <label for="contratos_vencer">Contratos a Vencer 30 dias</label> <br> </div> </div> </div> </div> <br> <!-- botões de acão --> <div class="btn-acao" style="margin-bottom: 0px;"> <div class="row"> <div class="col-md-2 col-md-offset-1"> <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> </div> <div class="col-md-2 col-md-offset-1"> <button type="button" id="btn-cancelarRel" class="btn btn-primary btn-block">Voltar</button> </div> </div> </div> <br> </form> </div> <!-- tab pagina 1 --> </div> </main> <!-- JavaScript (Opcional) --> <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="/js/funcoesCliente.js"></script> <script type="text/javascript" src="/js/script.js"></script> </body> </html>  
       
      Agora o código do routes e controllers. No controllers preciso acessar um elemento radio da view
      *** botão para submeter a view <button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button> *** rota a ser executada ao sonfirmar a execução do relatório <form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos"> ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosRoutes.js var contratosControllers = require('../controllers/contratosControllers.js'); module.exports = (app) => { app.get('/contratos/relatorios/relContratos', contratosControllers.contratosRel); app.post('/contratos/relatorios/RelContratosPrint', contratosControllers.printContratosRel); } +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ arquivo: contratosControllers.js const alunosController = require('../models/contratosModels.js'); const cnf_ambiente = require('../../config/config.js'); const moment = require('moment'); module.exports = { printContratosRel, } function printContratosRel(req, res){ console.log("Data Inicial Normal: "+req.body.cad_ini) console.log("Data Final Normal..: "+req.body.cad_fim) console.log("++++++++++++++++++++ DATA NO FORMATO DE ENTRADA APÓS O POST ++########################") // ++++++++++++ BAIXO O ERRO document is not defined var radios = document.getElementsById("tipoRel"); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { console.log("Escolhido: " + radios[i].value); } } cod_i = req.body.cod_ini; cod_f = req.body.cod_fim; atv_i = req.body.atv_ini; atv_f = req.body.atv_fim; cad_i = req.body.cad_ini; cad_f = req.body.cad_fim; vig_i = req.body.vig_ini; vig_f = req.body.vig_fim; sit_i = req.body.sit_ini; sit_f = req.body.sit_fim; cur_i = req.body.cur_ini; cur_f = req.body.cur_fim; emp_i = req.body.emp_ini; emp_f = req.body.emp_fim; cie_i = req.body.cie_ini; cie_f = req.body.cie_fim; vlr_i = req.body.vlr_ini; vlr_f = req.body.vlr_fim; console.log("Relatório >>>>>>>>>>>>>>>>>>>>>>>> "+cad_i + ' - '+ cad_f); alunosController.buscarPrintContratosRel( cod_i, cod_f, vlr_i, vlr_f, sit_i, sit_f, cur_i, cur_f, emp_i, emp_f, cad_i, cad_f, vig_i, vig_f, atv_i, atv_f, cie_i, cie_f, function(err, result){ if(result){ console.log("Encontrei registro de contratos.... Vou tratar das datas.."); for(var i = 0; i < result.length; i++ ){ result[i].cea_dtcadastro = moment(result[i].cea_dtcadastro).format("DD/MM/YYYY"); result[i].cea_dtalteracao = moment(result[i].cea_dtalteracao).format("DD/MM/YYYY"); result[i].cea_vigenciainicial = moment(result[i].cea_vigenciainicial).format("DD/MM/YYYY"); result[i].cea_vigenciafinal = moment(result[i].cea_vigenciafinal).format("DD/MM/YYYY"); } } if (err) { throw err; } else{ res.render('estagios/relatorios/frm_relContratosPrint.ejs', {title: 'Contratos', nomeUsuario: global.nomeUsuario, codigoUsuario: global.codigoUsuario, nomeFormulario: req.originalUrl, obj_contratos: result, }); } }); }  
×

Important Information

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