I have problem with hiding image for mobile devices. I'm using Semantic UI framework. In documentation I found some classes:
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/
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.
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.
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).
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.
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="">
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With