How to hide a div if access is mobile in materialize
I am working on a project in which I need to hide or remove a <div> if the user accesses the system by mobile, searching in Google I saw some examples of how to do this using Bootstrap, I would like to know if there is any way to do with Materialize.
3 answers
The correct way to do this is by using Materialize{[2's own helpers classes]}
Then it would look like this
<div class="hide-on-small-only"></div>
Official documentation as picture https://materializecss.com/helpers.html
If the case is to hide the <div> you could use the rules of @media using CSS .
@media screen and (min-width: 0px) and (max-width: 440px){
div{
display: none;
}
}
Hope it helps you!
Hello, answering your question you can use the orientation attribute in the @media rule for example in the first code, it will be executed if the user is with the phone vertically i.e. " portrait "and the second will be executed if the user is with the phone horizontally i.e."landscape".
1-code1
@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: portrait){
div{
display: none;
}
}
So basically this code is doing is case for screen and the screen has a maximum width of 440px and is in orientation portrait (vertical) run this code in case it would be "display: none" plus you can put whatever you want!
2-code2
@media screen and (min-width: 0px) and (max-width: 440px) and (orientation: landscape){
div{
display: none;
}
}
This code is similar to the previous one only changes that the orientation is" landscape " horizontally.
Is very simple!!! if you want to know more about @ media study a little on these sites are Optima
Https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Https://www.devmedia.com.br/utilizando-css-media-queries/27085