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?

Solution

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>

Comments

[denmch]

I'd simplify this by putting display: none in the media query triggered at min-width: 768.1px. This way you only need the media query, and don't have (1) to reset the default display on the element only to (2) reverse it back with a media query.

[Admin]

@denmch thank you it worked! How to set the question as answered?

[Bhuwan]

@denmch Agreed....I have used the max-width because OP had mentioned in the question that he want to use max-width only....BTW I have also added the min-width solution...

[Admin]

Thank you @BhuwanBhatt I am inexperienced and I am having a hard time dealing with media queries. Have a great day.

[denmch]

@ElPistolero The two options are functionally equivalent, so Bhuwan Bhatt should keep the accepted answer. Good luck moving forward and keep asking questions!