CSS CSS funciona só no celular mas no computador não

[Henrique Marcandier]

Boa Tarde pessoal,

eu tô tendo problemas com um site aqui. O da invasão corinthiana.

Trabalho para a 4 bts e eles estão com uma certa urgência nisso, pois o evento é dia 30/07 e até agora ninguém conseguiu resolver isso.

A página para acesso é: https://www.invasaocorinthiana.com.br/fazendinha

Se você escolher o dia lá e o horário aparecem os jogadores no campo. Mas estamos tendo problemas no alinhamento disso na tela. Agora por ex, está bom só no celular. Mas no computador não. Se eu altero o CSS eu só consigo alterar a posição manualmente.

No css está assim na div dos jogadores:
left: 1%;
width: 91%;
height: 180%;
top: 230% !important;
position: absolute;

Assim, só funciona para celular. Mas se eu altero para:
left: 1%;
width: 91%;
height: 180%;
top: 145% !important;
position: absolute;

Aí funciona só para o computador.

Alguém sabe como resolver isso?

Já tentamos de tudo aqui.

 

Tentamos um vertical-align:botton; nada.

Aí tentamos uma tal de flexbox. também nada

 

Ah eh!? e vou deixar da segunda maneira, pois assim todo mundo pelo menos ve os jogadores na tela.

[DiF]

@Henrique Marcandier Não vi como foi feito o CSS, mas já tentou implementar o Media query?

 

Basicamente é uma regra que permite  usar duas medidas diferentes em um mesmo CSS, baseado na resolução destinada.   OU seja, você pode implementar as duas medidas do celular e para computador usando o media query.

 

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Henrique Marcandier]

não tô conseguindo não.

 

to tentando usar assim:

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

//definições para tela com no máximo 1200px

}



@media screen and (min-width: 100px) {

//definições para tela com no mínimo 100px

}

 

Existe algo errado?

[DiF]

@Henrique Marcandier

 

Você definiu o  meta viewport no topo?

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Tenta dessa forma:

Para computadores, não use o media query.  Deixe "normal"  Apenas defina o media query para a resolução do celular.

 

Tente assim:

@media (max-width: 100px) {
  /* use aqui as regras css exclusivas para celular*/
  body{
  ...
  }
  
  img{
  ...
  }
  
  div{
    ...
  }
}

 O código que eu coloquei acima é só um mero exemplo, implemente com elementos que precisam ser implementados no seu site.

 

Você pode ver um exemplo aqui: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media3

 

Note que, que no código do exemplo do link, apenas o media query foi aplicado para a resolução menor (celulares), enquanto resoluções maiores como tablets, pc, notebook, foram feitas normalmente sem o media query.

[Henrique Marcandier]

opa valeu, consegui lá...

 

abraços.

ah, tive mais um problema lá: quando estou do notebook, se eu escolho uma data e hora lá e aparecem os jogadores lá, se eu tentar escolher uma outra data, os jogadores saem de posição.

 

Veja aí: https://invasaocorinthiana.com.br/fazendinha

 

vou postar o meu codigo css aqui também para que possam entender:

 

    .box-infos {

        width: 100%;

        position: relative;

      }

        .box-infos img.campo {

          width: 100%;

          z-index: 5;

          top: 0;

        }

        .box-infos .players {

          left: 1%;

          width: 91%;

          height: 180%;

          top: 145% !important;

          position: absolute;

        }

        /* TIMES */

        /* TIME 1 */

        .box-infos .players .t1 {

          position: absolute;

        }

        .box-infos .players img {

          width: 36px;

        }

        .box-infos .players .t1_goleiro {

        top: 52%;

        left: 17%;

        }

        .box-infos .players .t1_zagueiro1 {

        top: 59%;

        left: 21%;

        }

        .box-infos .players .t1_zagueiro2 {

        top: 49%;

        left: 26%;

        }

        .box-infos .players .t1_lateral1 {

        top: 45%;

        left: 33%;

        }

        .box-infos .players .t1_lateral2 {

        top: 67%;

        left: 23%;

        }

        .box-infos .players .t1_volante1 {

        top: 53%;

        left: 33%;

        }

        .box-infos .players .t1_volante2 {

        top: 61%;

        left: 30%;

        }

        .box-infos .players .t1_meio_campo1 {

        top: 58%;

        left: 37%;

        }

        .box-infos .players .t1_meio_campo2 {

        top: 68%;

        left: 40%;

        }

        .box-infos .players .t1_atacante1 {

        top: 56%;

        left: 44%;

        }

        .box-infos .players .t1_atacante2 {

        top: 47%;

        left: 43%;

        }

        /* TIME 2 */

        .box-infos .players .t2_goleiro {

        top: 50%;

        right: 13%;

        }

        .box-infos .players .t2_zagueiro1 {

        top: 58%;

        right: 19%;

        }

        .box-infos .players .t2_zagueiro2 {

        top: 49%;

        right: 23%;

        }

        .box-infos .players .t2_lateral1 {

        top: 44%;

        right: 29%;

        }

        .box-infos .players .t2_lateral2 {

        top: 67%;

        right: 20%;

        }

        .box-infos .players .t2_volante1 {

        top: 50%;

        right: 31%;

        }

        .box-infos .players .t2_volante2 {

        top: 58%;

        right: 27%;

        }

        .box-infos .players .t2_meio_campo1 {

        top: 55%;

        right: 35%;

        }

        .box-infos .players .t2_meio_campo2 {

        top: 65%;

        right: 40%;

        }

        .box-infos .players .t2_atacante1 {

        top: 56%;

        right: 43%;

        }

        .box-infos .players .t2_atacante2 {

        top: 45%;

        right: 40%;

        }

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

      .box-infos .players img {

          width: 24px;

      }

      #responsive_box {

        position: relative !important;

        padding-top: 50px;

      }

      .box-infos .players {

        /*top: 61%;*/

        top: 145% !important;

        height: 55%;

        left: 1%;

      }

    }

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

      .box-infos .players {

        /*top: 62% !important;*/

      top: 230%!important;

      }

    }

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

      .box-infos .players {

        height: 32% !important;

        /*top: 61%;*/

        top: 230%;

      }

      .box-infos {

          background-color: #000;

        }

      .box-infos .players img {

          width: 17px;

        }

        #responsive_box {

          position: relative !important;

          padding-top: 50px;

        }

        .datas-evento {

            margin: 20px 0px !important;

        }

    }

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

      .box-infos .players {

        top: 230%!important;

      }

    }

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

      .box-infos .players {

        /*top: 63%!important;*/

    top: 230%!important;

      }

    }

   

    @media screen and (min-width: 2558px) {

      .box-infos .players img {

          width: 40px;

      }

      .box-infos .players .t1_goleiro {

        top: 75%;

        left: 17%;

      }

        .box-infos .players .t1_lateral1 {

          top: 78%;

        }

        .box-infos .players .t1_atacante2 {

          top: 50%;

          left: 43%;

        }

        .box-infos .players .t1_zagueiro2 {

          top: 51%;

          left: 27%;

        }

        .box-infos .players .t1_volante1 {

          top: 55%;

        }

        .box-infos .players .t1_atacante1 {

          top: 57%;

        }



        .box-infos .players .t2_goleiro {

          top: 58%;

          right: 15%;

        }

        .box-infos .players .t2_zagueiro2 {

            top: 51%;

            right: 24%;

        }

        .box-infos .players .t2_zagueiro1 {

          right: 20%;

        }

        .box-infos .players .t2_lateral1 {

          top: 48%;

        }

        .box-infos .players .t2_lateral2 {

          right: 22%;

        }

        .box-infos .players .t2_volante1 {

          top: 51%;

          right: 32%;

        }

        .box-infos .players .t2_volante2 {

          top: 63%;

          right: 30%;

        }

        .box-infos .players .t2_atacante2 {

          top: 53%;

        }

        .box-infos .players .t2_meio_campo2 {

          top: 68%;

        }

    }

esse é todo o css utilizado ali