Hide element for mobile only - Semantic UI

Question

I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes:

mobile only - will only display below 768px
tablet only - will only display between 768px - 991px
computer only - will always display 992px and above

Just for example, I'm using "computer only" classes to hide image on tablets and mobile, but the result confused me.

<div class="ui grid stackable">
  <div class="row middle aligned">
    <div class="nine wide column">
      <h1 class="ui header blue">Default Header.</h1>
    </div>
    <div class="seven wide computer only column">
      <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
    </div>
  </div>
</div>

http://jsfiddle.net/3xkrx/318/

Could you clarify the question, please? What about the result confused you? — Christopher, Jul 06 '17 at 18:50

score 12 · Accepted Answer · edited Nov 21 '17 at 17:18

Also, I found one more solution. May be for someone it will helpful.

I've added classes "mobile hidden" to column which I wanted to hide on mobile devices.

<div class="ui grid stackable">
 <div class="row middle aligned">
  <div class="nine wide column">
   <h1 class="ui header blue">Default Header.</h1>
  </div>
  <div class="seven wide column mobile hidden">
    <img class="ui image" src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">
  </div>
</div>

score 11 · Answer 2 · answered Jul 04 '16 at 11:38

11

Add mobile only grid to img tag

The correct expression is below:

<img class="ui image mobile only grid " src="http://icons.veryicon.com/png/System/iNiZe/niZe%20%20%20IMG.png" alt="" title="">

answered Jul 04 '16 at 11:38

vignesh

951
5
13

thanks, it works fine in jsfiddle, but don't work on my website. Image on widescreen just disappear, something magical happens. I used class="ui image computer only grid " – WhatIsHTML Jul 04 '16 at 12:16
this is not going to work supposedly, because it will show on tablet – carkod Jan 29 '18 at 14:22

score 7 · Answer 3 · answered Jul 25 '17 at 19:55

Visit here works really well

/* Mobile */

@media only screen and (max-width: 767px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large monitor only"]:not(.mobile),
  [class*="widescreen monitor only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}
etc...

https://jsfiddle.net/8LkLoxcx/

Hide element for mobile only - Semantic UI

3 Answers3

Linked