Currently, I am in the process of developing a system interface with Angular and PrimeNG specifically for mobile devices. The main requirement is to have a carousel to display a set of cards. After evaluating different options, I decided to utilize the ngPrime Carousel component.
Once I integrated the carousel into my code and tested it, I noticed that the carousel was not responsive to the mobile screen size as expected. Despite trying various solutions such as removing style classes and setting min-width to null, the issue persisted. Interestingly, when displaying the cards individually without the carousel, the sizing worked perfectly fine.
One workaround that provided some relief was setting the max-width on the main div. Although this resolved the immediate problem, it jeopardized the overall responsiveness of the screen layout.
I am reaching out to inquire if anyone has encountered a similar challenge and if there exists a viable solution specific to the carousel component without necessitating alterations to other div elements.
Below are snippets of 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>
Additionally, here is an excerpt from the component file containing TypeScript code:
{Component Code Goes Here}You can view the screenshots here: [Link to Before Screenshot] and [Link to After Screenshot]. Any assistance or advice would be greatly appreciated!