Angular Material Card and Carousel sizes

Question

I am currently working on a webpage, and I am struggling with Angular Material Card size and Angular Material Carousel size as well.

I've tried adding a lot of different properties to both of the elements, but nothing seems to do the trick here.

The card currently looks like this.

It looks horrible. I want the card to be smaller, the carousel to be smaller as well, and that the images fit the carousel, as for now, the images are shown cropped, as more than half of the picture can't be seen.

Any ideas how to fix this?

The code is the following:

<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="15px">
  <mat-card style= "width: fit-content;" class="results">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{myShowLodgment.Name}}</mat-card-title>
      <mat-card-subtitle>Estrellas: {{myShowLodgment.NumberOfStars}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <mat-carousel [hideArrows]="false" [hideIndicators]="false" timings="200ms ease-in" [autoplay]="true"
        interval="4000" color="white">
        <mat-carousel-slide *ngFor="let slide of myShowLodgment.Photos" overlayColor="#ffffff" [hideOverlay]="false">
          <img [src]="slide" alt="">
        </mat-carousel-slide>
      </mat-carousel>

      <p>
        <b>Descripción</b>: {{myShowLodgment.Description}}
        <br>
        <b>Dirección</b>: {{myShowLodgment.Address}}
        <br>
        <b>Precio por noche</b>: ${{myShowLodgment.PricePerNight}}
        <br>
        <b>Precio total</b>: ${{myShowLodgment.TotalPrice}}

      </p>

      <mat-card-actions>
        <button *ngIf="canBook(myShowLodgment.IsFull)" mat-stroked-button color="primary" disabled>Alojamiento sin
          capacidad!</button>
        <button *ngIf="!canBook(myShowLodgment.IsFull)" mat-stroked-button color="primary"
          (click)="submitBooking(myShowLodgment.Id)">Reservar!</button>
      </mat-card-actions>
    </mat-card-content>
  </mat-card>
</div>

Thank you for your time, and any help is appreciated.

Are you using CSS in Root? Or Scss? Take the style attribute out of element and put mat-card style in root. Then redisplay press f12 and adjust style to your liking. Take those settings and put in root style. You will do best via display : grid as first setting. Then learn more about Grid. — JWP, Nov 15 '20 at 00:03

score 1 · Answer 1 · answered Nov 15 '20 at 03:40

Try change this lines from bootstrap.min.css to change height and width before

.carousel { position: absolute;height:100%;min-height: 100%;width:100%; }
.carousel-inner { position: relative; width: 100%; height:100%;min-height: 100%;}
.carousel-inner>.item {height:100%;min-height: 100%; position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left;width:100%; }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }

Angular Material Card and Carousel sizes

1 Answers1