Buggy on width of PrimeNG Carousel on mobile

I'm developing a system interface using Angular with PrimeNG that needs, just to mobile, a carousel to show some cards. I opted to use the ngPrime Carousel. So, i implemented it on my code and when i tested, the carrousel wasn't respecting the mobile size. I tried many things, like take off all the styles classes, try to set the min-width to null, etc. The screen just bugs with the carrousel. If i put the cards by itself, the size is correctly respected.

One way that i tried and it was a kind of a solution, is set the max-width to main div. The carousel respect this comand, but if i take that as a solution, the screen resposivity will be destroyed.

I want to know if someone has passed by this, and if has any solution envolving the carousel, whitout have to change the others div.

below follows my codes:

my HTML file:

Planos

<div class="p-grid width-100 header" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}">

    <div class="p-col-12 main-title">
        <h1>Escolha o seu plano</h1>
    </div>
    <div class="p-col-12 desc-title">
        <p>Escolha uma das opções abaixo e tenha acesso aos benefícios</p>
    </div>
</div>

<div *ngIf = "mobileSize" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}" class="p-grid width-100 content">
    <p-carousel class="p-col-12 width-100 carousel" [value]="planoList" [numVisible]="1" [numScroll]="1">
        <ng-template class="width-100 carousel-template" let-plano pTemplate="item">
            <div class = "p-col-12 plano-box">
                <div class = "width-100 card-ofertas">
                    <div class = "p-col-12 preco-plano">
                        <h2>{{(plano.amount/100) | currency:'R$'}}</h2><p> / {{plano.code}}</p>
                    </div>
                    
                    <div class="p-col-12 desc-geral">
                        <p> {{ plano.description }}</p>
                    </div>
                    
                    <div *ngFor="let item of loremIpsum" class="p-col-12 item-carac">
                        <span style="font-size: 1rem" class="pi pi-check-circle"></span> <p>{{item}}</p>
                    </div>
    
                    <div class="p-col-12 botao-assinar-box">
                        <button mat-raised-button class="cta-button clickskin botao-assinar" (click)="assinar(plano)">
                            <span>Assinar</span>
                        </button>
                    </div>
                </div>
            </div>                
        </ng-template>
    </p-carousel>    
</div> 

<div *ngIf = "!mobileSize" [@animate]="{value:'*',params:{delay:'200ms',scale:'0.2'}}" class="p-grid width-100 content">
    <div class = "p-col-12 p-md-3 plano-box" *ngFor="let plano of planoList">
        <div class = "width-100 card-ofertas">
            <div class = "p-col-12 preco-plano">
                <h2>{{(plano.amount/100) | currency:'R$'}}</h2><p> / {{plano.code}}</p>
            </div>
            
            <div class="p-col-12 desc-geral">
                <p> {{ plano.description }}</p>
            </div>
            
            <div *ngFor="let item of loremIpsum" class="p-col-12 item-carac">
                <span style="font-size: 1rem" class="pi pi-check-circle"></span> <p>{{item}}</p>
            </div>

            <div class="p-col-12 botao-assinar-box">
                <button mat-raised-button class="cta-button clickskin botao-assinar" (click)="assinar(plano)">
                    <span>Assinar</span>
                </button>
            </div>
            
        </div>
    </div>
</div>

The component:

import { Router } from '@angular/router';
import { Component, OnInit, ViewEncapsulation, OnDestroy, HostListener } from '@angular/core';
import { MatDialog } from '@angular/material';

import { fuseAnimations } from '@fuse/animations';

import { WirecardService } from 'app/services/wirecard.service';
import { BehaviorSubject } from 'rxjs';

import { EfetuarPagamentoComponent } from './dialogs/efetuar-pagamento/efetuar-pagamento.component';

@Component({
  selector: 'app-assinatura',
  templateUrl: './assinatura.component.html',
  styleUrls: ['./assinatura.component.scss'],
  animations: fuseAnimations,
  encapsulation: ViewEncapsulation.None
})
export class AssinaturaComponent implements OnInit, OnDestroy {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.mobileSize = window.innerWidth <= 768;  
    this.screenSize = window.innerWidth + "px";
  }
  
  public planos$: BehaviorSubject<any[]>
  public planoList: any[] = [];
  public cssMainScreen: any
  public screenSize = window.innerWidth + "px";
  public mobileSize = window.innerWidth <= 768;  

  

  public loremIpsum = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                       "Quisque sit amet tortor rutrum, ornare lacus eget, dictum urna.",
                       "Donec hendrerit lectus quis dolor luctus dapibus.",
                       "Sed euismod sem nec nisl sollicitudin euismod.",
                       "Duis interdum orci non orci aliquam, ut porttitor ligula facilisis."]

  constructor(
    private _matDialog: MatDialog,
    private _wirecardService: WirecardService,
    private _router: Router) { }    

  async ngOnInit() {
    

    this.cssMainScreen = document.getElementsByClassName("content-template");    
    
    this.cssMainScreen[0].classList.add('padding-0')
    console.log(this.cssMainScreen[0])

    this._wirecardService.getPlanos();
    this.planos$ = this._wirecardService.planos$;

    this.planos$.subscribe((planos: any[]) => {
      this.planoList = planos.filter((v) =>  v.status);
      this.planoList.forEach(async (plano, index) => {
        const promocoes = await this._wirecardService.getPromocoesDia(plano.code);
        this.planoList[index]['promocoes'] = promocoes;
      });
    });
  }

  ngOnDestroy(){
    this.cssMainScreen[0].classList.remove('padding-0')
  }

  public assinar(plano: any): void {
    this._matDialog.open(EfetuarPagamentoComponent, {
      panelClass: 'app-efetuar-pagamento-dialog',
      disableClose: true,
      autoFocus: false,
      data: plano,
    });
  }

  public getPromocoesPlano(planoId: string) {
    return this._wirecardService.getPromocoesDia(planoId);
  }

  public voltarMinhaConta(){
    this._router.navigate(['minha-conta'])
  }
}

below follow how it is:

below follows how it should be (That print was possible thanks to max-width)

grateful for any help!

Solution

I solved this issue by doing a little workaround:

I created a function to set the max-height prop dynamically according to the screen size, using the onResize method from window.