responsive page broken after upgrading to angular 12.2.5

Expected behavior Same code worked on Angular 11 just fine. It would adjust automatically if I opened it on my iPhone 11 pro , Macbook Pro or iPad. Now it doesn't auto adjust.

I have tried using div container, container-fluid, container-md etc. Not sure if I have to update something specific for angular 12 upgrade.

Another weird thing I am noticing on localhost on both Chrome and Firefox works as expected when i change the device from the developer tools menu. But once its served through S3/Cloudfront weird the content does not auto adjust responsively to device. (After every build cloudfront cache is invalidated so I am pretty sure that is not the issue.)

Actual behavior

Code

landingzone.component.html

<app-navbar></app-navbar>
<app-resume></app-resume>
<div class="container-fluid"> // container used to work fine in angular 11
<hr class="my-5">
<app-nasapod></app-nasapod>
</div>
<app-footer></app-footer>

Resources (screenshots, code snippets etc.)

Angular CLI: 12.2.5 Node: 14.17.3 Package Manager: npm 6.14.13 OS: darwin x64

resume.component.html

   <div class="container-fluid">
      <section class="mx-md-5 text-center text-lg-left">
        <div class="row d-flex justify-content-center">
          <div class="col-md-12">
            <div class="row p-5">
              <div class="col-lg-8 d-flex flex-column">
                <p class="font-weight-normal text-left">abcd</p>
                <p class="font-weight-normal text-left">xyz</p>
                <p class="font-weight-normal text-left">hello</p>
                <p class="font-weight-normal text-left">world</p>
                <p class="font-weight-normal text-left">learning about</p>
                <p class="font-weight-normal text-left">weird behavior</p>
                <div>
                  <p class="font-weight-bold lead mb-2"><strong>Me</strong></p>
                  <p class="font-weight-bold text-muted">Myself</p>
                </div>
              </div>
              <div class="col-lg-4 d-flex mb-2 align-items-center">
                  <div class="flex-row avatar mx-4 w-100 white d-flex justify-content-center align-items-center">
                    <img src="/assets/AB.jpg" class="rounded-circle img-fluid z-depth-1" alt="">
                  </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    <!-- Linkedin -->

    <!--Linkedin-->
    <p></p>

    <!-- Jumbotron -->
    <div class="container-fluid text-center">

      <!-- Linkedin -->
      <a href="linkedinlink" target="_blank" (click)="linkedInButtonClicked()" type="button" mdbBtn floating="true" size="lg" color="li" class=" waves-light" mdbWavesEffect><mdb-icon fab icon="linkedin-in"></mdb-icon></a>
      <hr class="my-5">
      <div class="row align-items-center">
                  <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/57480ca3-2834-4bab-9c0d-58c13ecf2f85/linked_in_profile" target="_blank" (click)="cisspClicked()"><img src="/assets/cissp200.png"  alt="Verify"></a></div>
                  <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/89ce9904-831a-4782-b24a-8ff352fd5573/linked_in_profile" target="_blank" (click)="awsccpClicked()"><img src="/assets/awsbadge.png"  alt="Verify"></a></div>
                  <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/b5b2febe-a186-4c79-9a42-277e5aae3d3b/linked_in_profile" target="_blank" (click)="awscsaClicked()"><img src="/assets/awscsabadge.png"  alt="Verify"></a></div>
      </div>
      <div class="row align-items-center">
                <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/48d9fd3f-4fae-4d95-88e2-b370d4b7ce19/linked_in_profile" target="_blank" (click)="awscssClicked()"><img src="/assets/awscssbadge.png"  alt="Verify"></a></div>
                <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/36538592-b595-43fe-be50-439fb53f7012/public_url" target="_blank" (click)="awscdaClicked()"><img src="/assets/awsdevcert.png"  alt="Verify"></a></div>
                <div class="col p-3 ml-2"><a href="https://www.youracclaim.com/badges/cb0707ab-607c-482a-a169-566aeba49f5a/linked_in_profile" target="_blank" (click)="terraformcertClicked()"><img src="/assets/terraformbadge.png" alt="Verify"></a></div>
      </div>
    </div>
    <!-- Jumbotron -->

Everything works for the most part except for the layout and responsiveness of the content and you can check it out: https://www.aakashbanerjee.com I haven't done frontend work in a while so maybe I am missing something with Angular 12 upgrade. Thank you for any help. Much appreciated.