Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 638
WhatIsHTML Avatar asked Jul 04 '16 11:07

WhatIsHTML


People also ask

Is Semantic UI abandoned?

Semantic UI is not dead. There is a community that wants to keep it going. I think it would be helpful to create an RFC repo to discuss future direction of the project and the planning of the implementations of the decisions we make.

How do you customize semantic UI?

Building the custom styles First you need to build the files in the semantic folder and then include the generated CSS in your main application file. Since this is not something you want to do manually do every time, let's update the scripts in the package. json file to build the Semantic UI files.

How do you override semantic UI?

To override say, the font color, all we have to do is write a selector that is more specific than this selector. We can achieve this by combining their two class selectors (equally specific) with a type selector (additional specificity).

Is Semantic UI good?

Semantic UI unpacks a variety of themes and CSS, JavaScript, and font files. It is one of the best ways to start designing a page through the semantic method. The semantic method ensures your designs look stunning and bundles a range of components and settings.


2 Answers

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="">
like image 96
vignesh Avatar answered Oct 05 '22 05:10

vignesh


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/

like image 33
Achmed Zuzali Avatar answered Oct 05 '22 05:10

Achmed Zuzali