How to show text only on mobile with CSS?

Question

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

1. hide the div with display:none or

2. is there any other solution?

Answer 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>