WhatIsHTML WhatIsHTML - 1 year ago 402
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 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="">


Answer Source

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="">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download