Hey everyone, I currently have a page that looks like this:
I'm looking to change it so that instead of one image per row, there are three images per row (and reduce their size to fit three in a row).
Here is my current code:
<mat-step [stepControl]="secondFormGroup" label="Selecciona Habitación">
<div class="container" *ngFor = 'let dummy of ListaPiezasView$ | async'>
<!--Make any necessary modifications here-->
<div class="card">
<div class="container-fliud">
<div class="wrapper row">
<div class="preview col-md-4">
<div class="preview-pic tab-content">
<div class="tab-pane active" id="pic-1"><img src="{{dummy.foto}}" /></div>
</div>
</div>
<div class="details col-md-8">
<h3 class="product-title">{{dummy.codhabitacion__nombre}}</h3>
<div class="rating">
<div class="stars">
<span><mat-icon class="estrella">star</mat-icon></span>
<span><mat-icon class="estrella">star</mat-icon></span>
<span><mat-icon class="estrella">star</mat-icon></span>
<span><mat-icon class="estrella">star</mat-icon></span>
<span><mat-icon class="estrella">star</mat-icon></span>
</div>
<h4 class="verde"><strong>Available</strong></h4>
</div>
<h4 class="price">{{dummy.accesorios}}</h4>
<h4 class="price accesorioss">Price: <span>{{dummy.precio}}</span></h4>
<h4 class="price"><strong>Quantity:</strong> {{dummy.cantidad}} </h4>
<h4 class="price">Size:<span data-toggle="tooltip" title="small">{{dummy.tipocama}}</span></h4>
<h4 class="price"><strong>Room Number:</strong> {{dummy.numero}} </h4>
<br>
<input formControlName= dias>
<div class="action">
<mat-radio-group name="opList" formControlName="secondCtrl" required>
<mat-radio-button class="selecthabitacion price" (click)="recibirPieza(dummy);" value="1" >Select Room</mat-radio-button>
</mat-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="openSnackBar('You must select a room!', 'Understood', 'red-snackbar')" matStepperNext>Next</button>
<div #btnRef></div>
</div>
<!--You can make changes up to this point-->
If you want to display three images per row and reduce their size, try modifying the code as suggested. Let me know if you need further assistance!
UPDATE:
This is what I achieved with the modified code provided by @AmeRiza
Although the images are smaller, the cards do not utilize the full space and appear too narrow.
The original card looked like this, but I am aiming for three cards in a row with decently sized images.