6

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?

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
ElPistolero
  • 103
  • 1
  • 1
  • 5

2 Answers2

18

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>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • 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. – denmch Jan 20 '18 at 16:27
  • @denmch thank you it worked! How to set the question as answered? – ElPistolero Jan 20 '18 at 16:31
  • @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... – Bhuwan Jan 20 '18 at 16:31
  • Thank you @BhuwanBhatt I am inexperienced and I am having a hard time dealing with media queries. Have a great day. – ElPistolero Jan 20 '18 at 16:34
  • @ElPistolero The two options are functionally equivalent, so Bhuwan Bhatt should keep the accepted answer. Good luck moving forward and keep asking questions! – denmch Jan 20 '18 at 16:36
0

It didn't work for me or i couldn't figure it out. so i used this..

CSS

.hideonphone{ display: none;}
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .hideonphone{ display: inline;}}

HTML

 <div class="hideonphone"> The text goes here</div>

Maybe is the same solution but i'm inexperienced.

Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Athinodoros Polichronidis
  • 1