Semantic UI: how to cut down the Item's height-open source projects Semantic-Org/Semantic-UI


You SemanticUI.css contains some base theming which determines the height of the .item class.

.ui.items>.row>.item, .ui.items>.item {
display: block;
float: left;
position: relative;
top: 0;
width: 316px;
min-height: 375px; /* here */
margin: 0 .5em 2.5em;
padding: 0;
background-color: #FFF;
line-height: 1.2;
font-size: 1em;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1);
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
border-bottom: .2em solid rgba(0,0,0,.2);
border-radius: .33em;
-webkit-transition: -webkit-box-shadow .2s ease;
transition: box-shadow .2s ease;
padding: .5em;

You will need to change or delete that property.