How To Show Text Only On Mobile With CSS?

I have a text (in a div) which shows on desktop and mobile screens. Expected I want the text to only show in @media only screen and (max-width: 768px) How to hide the div with dis

Solution 1:

Use media query.

Set display:none to div and then apply display:block for mobile using max-width media query.

Stack Snippet

div {
  display: none;
}

@media only screen and (max-width: 768px) {
  div {
    display: block;
  }
}

<div>Text</div>

or you can use the min-width media query. Less code here

Stack Snippet

@media only screen and (min-width: 768px) {
  div {
    display: none;
  }
}

<div>Text</div>