css – My deployed web site is distorted on iphones however seems right on desktop and non-iphone telephones. All assist is way appreciated

[W O R K I N G ]

Right here is the way it seems on my desktop (https://imgur.com/A5TpUu2)

My buddy’s cellphone which is not an iphone (https://imgur.com/V0Khmjq)

Iphone 11 in line with browser (https://i.imgur.com/MjZyxih.png)

[N O T – W O R K I NG]

A screenshot from an iphone 11 (https://imgur.com/YV5qHuV)

A screenshot from an iphone 12 (https://imgur.com/ltZo7xQ)

[SASS FOR NAVIGATION]

   .navigationBar_ul--desktop{
       show: none;
   }
   .navigationBar{
       background-color: white;
       peak: fit-content;
       show: flex;
       justify-content: flex-end;
       place:sticky;
       high: 0;
       overflow: hidden;
       z-index: 5; 
     }
     .navigationBar.lively { 
         background-color: #F5F5F5;
     }

.app_navbar-menu {
       width: fit-content;
       peak: fit-content;

       .app_navbar-menu_icon{
           shade: rgba(0, 0, 0, 0.799);
           peak: clamp(2rem, 4rem, 6rem);
           margin-right: 1rem;

       }
   
   
       div {
           place: fastened;
           high: 0;
           backside: 0;
           proper: 0;
           z-index: 50;
   
           padding: 1rem;
   
           width: 80%;
           peak: 100vh;
   
           show: flex;
           justify-content: flex-end;
           align-items: flex-end;
           flex-direction: column;
   
           box-shadow: 0 0 50px rgba(7, 7, 7, 0.5);
   
           background: white;

           overflow: hidden;
           
           -webkit-backface-visibility: hidden;
   
   
           svg {
               width: 15%;
               peak: auto;
               shade: rgba(252,98,77);
           }
           ul {
               list-style: none;
               margin: 0;
               padding: 0;
               peak: 100%;
               width: 100%;
   
               show: flex;
               hole: 10%;
               flex-direction: column;
               justify-content: flex-start;
               align-items: flex-start;
   
               li {
                   peak: fit-content;
                   cursor: pointer;
                   a{
                       text-decoration: none;
                       font-size: 2rem;
                       font-weight: 500;
                       text-transform: uppercase;
                       font-family: 'Montserrat', sans-serif;
                       shade: black;
   
                       transition: all .3s ease-in-out;
   
                   }
               }
           }
   
       }
   }

}

[SASS FOR HOME BACKGROUND]

            padding-top: 4rem;
            padding-bottom: 4rem;
            show: flex;
            justify-content: heart;
            align-items: heart;
            flex-direction: column;
            background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) ), url('./homeImage.png');
            background-attachment: fastened;
            background-position: heart;
            background-repeat: no-repeat;
            background-size : cowl;```