Estou trabalhando em um projeto no qual preciso esconder ou remover uma <div>
caso o usuário acesse o sistema pelo celular, pesquisando no Google vi alguns exemplos de com fazer isso utilizando o Bootstrap, gostaria de saber se tem alguma forma de fazer com o Materialize.
3 Respostas
Se o caso é esconder a <div>
você poderia utilizar as regras de @media
utilizando CSS.
@media screen and (min-width: 0px) and (max-width: 440px){
div{
display: none;
}
}
espero que te ajude!
-
1E Se o cara colocar o cel na horizontal ao a "tela" vai para 700px ou sei la, ai como fica essa regra?– hugocslCommented 20/02/2019 às 22:07
-
-
respondendo ao hugocs, caso o usurário esteja utilizando a navegação horizontal a div volta a aparecer, porém no meu caso não tem problema Commented 20/02/2019 às 23:23
A forma correta de fazer isso é usando as classes dos Helpers do próprio Materialize
Então ficaria como isso
<div class="hide-on-small-only"></div>
Documentação oficial conforme imagem https://materializecss.com/helpers.html
Olá, respondendo sua pergunta você pode usar o atributo de orientação na regra de @media por exemplo no primeiro código, vai ser executado se o usuário estiver com o celular na vertical ou seja "portrait" e o segundo será executado caso o usuário estiver com o celular na horizontal ou seja "landscape".
1 - code1
@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: portrait){
div{
display: none;
}
}
Então basicamente esse código está fazendo é caso for screen(tela) e a tela tiver uma largura máxima de 440px e estiver na orientação portrait(vertical) execute este código no caso seria "display: none" mais você pode colocar oque você quiser!
2 - code2
@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: landscape){
div{
display: none;
}
}
esse código é semelhante ao anterior só muda que a orientação é "landscape" na horizontal.
é muito simples!!! se quiser saber mais sobre @media estude um pouco nestes sites são otimos
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.devmedia.com.br/utilizando-css-media-queries/27085
-
Vlw pela força, vou estudar o conteúdo que vc passou Commented 21/02/2019 às 22:22