How to hide a div if access is mobile in materialize

Question

I’m working on a project that I need to hide or remove <div> if the user accesses the system by mobile, searching the Google I saw some examples of how to do this using the Bootstrap, I wonder if you have any way to do with the Materialize.

Answer 1

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

I hope it helps you!

Answer 2

Hello, answering your question you can use the orientation attribute in the @media rule for example in the first code, will run if the user is with the mobile vertical or "Portrait" and the second will be executed if the user is with the mobile phone horizontal or is "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 if for screen(screen) and the screen has a maximum width of 440px and is in the Portrait(vertical) orientation run this code in case it would be "display: None" more you can put what 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 above 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 great

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

https://www.devmedia.com.br/utilizando-css-media-queries/27085

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Answer 3

The correct way to do this is by using the Helpers classes of Materialize itself

Then it would look like this

<div class="hide-on-small-only"></div>

Official documentation according to image https://materializecss.com/helpers.html