Hello, please see the image below - I am trying to remove the thin vertical space between rows of images. I’ve tried making margin:0, padding:0 in main class, wrapper class, but to no avail. Can anyone help with the required css for this? I highlighted the problem area in red.
My CSS:
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: normal;
text-align: left;
flex-wrap:wrap;
}
.wrapper > * {
/*padding: 5px;*/
/*flex: 1 100%; -- I commented this out - the wrapper was taking up full width in Chrome*/
}
.header {
background: #DDDDDD;
border-color: #CCCCCC;
border-style: solid;
border-width:1px;
}
.main {
text-align: center;
background: #EEEEEE;
margin: 0px;
padding: 0px;
/*padding:2px;*/
}
My template:
<div class="wrapper">
<span ng-repeat="monitor in monitors| limitTo: monLimit" ng-if="monitor.Monitor.Function!='None'">
<header class="header"> <i class="ion-monitor"></i>
{{monitor.Monitor.Name}}
</header>
<article class="main">
<img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId)" on-hold="onHold($index)" on-release="onRelease($index)"/>
</article>
</span> <!--ng repeat -->
</div>