0

I am using Angular 18 with tailwind CSS. For mobile view, I want both the columns to have full width but it is not working. Any help is appreciated.

<div class="grid grid-cols-5 gap-4 mt-5 min-h-[calc(100vh-190px)]" *ngIf="isReady">
        <div class="col-span-2 !sm:col-span-5 panel p-0 bg-yellow-50 border border-yellow-300">
// customer details goes here
        </div>
        <div class="panel col-span-3 !sm:col-span-5 p-1">
            <app-interaction-history [interactionHistory]="interactionHistory"
                [selectedCustomer]="selectedCustomerDetails"></app-interaction-history>
        </div>
</div>

I tried using flex but to no avail. I also tried adding sm:grid-cols-1 to the main grid but still does not work

Improve this question
2
  • 1
    try with these two: for the first div col-span-5 sm:col-span-2 and for the second div col-span-5 sm:col-span-3 Commented Dec 21, 2024 at 6:43
  • 1
    @robert Thanks a lot! Finally I got it to work. Now I understood that we need to define classes for smaller screens first and then go upwards for larger screens Commented Dec 23, 2024 at 6:17
Related questions
904
Angular 6 - Could not find module "@angular-devkit/build-angular"
1096
Angular HTML binding
1247
Angular: conditional class with *ngClass
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.