WhatIsHTML WhatIsHTML - 5 months ago 93
CSS Question

Hide element for mobile only - Semantic UI

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


  1. mobile only - will only display below 768px

  2. tablet only - will only display between 768px - 991px

  3. 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/

Answer

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="">