My deployed website is distorted on iphones but looks correct on desktop and non-iphone phones. All help is much appreciated

Question

[W O R K I N G ]

Here is how it looks on my desktop (https://i.stack.imgur.com/l7AbF.jpg)

My friend's phone which isn't an iphone (https://i.stack.imgur.com/B4yQ4.jpg)

Iphone 11 according to browser (https://i.stack.imgur.com/tfwcU.jpg)

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

A screenshot from an iphone 11 (https://i.stack.imgur.com/A7k2r.jpg)

A screenshot from an iphone 12 (https://i.stack.imgur.com/w0dUW.jpg)

[SASS FOR NAVIGATION]

   .navigationBar_ul--desktop{
       display: none;
   }
   .navigationBar{
       background-color: white;
       height: fit-content;
       display: flex;
       justify-content: flex-end;
       position:sticky;
       top: 0;
       overflow: hidden;
       z-index: 5; 
     }
     .navigationBar.active { 
         background-color: #F5F5F5;
     }

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

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

       }
   
   
       div {
           position: fixed;
           top: 0;
           bottom: 0;
           right: 0;
           z-index: 50;
   
           padding: 1rem;
   
           width: 80%;
           height: 100vh;
   
           display: 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%;
               height: auto;
               color: rgba(252,98,77);
           }
           ul {
               list-style: none;
               margin: 0;
               padding: 0;
               height: 100%;
               width: 100%;
   
               display: flex;
               gap: 10%;
               flex-direction: column;
               justify-content: flex-start;
               align-items: flex-start;
   
               li {
                   height: fit-content;
                   cursor: pointer;
                   a{
                       text-decoration: none;
                       font-size: 2rem;
                       font-weight: 500;
                       text-transform: uppercase;
                       font-family: 'Montserrat', sans-serif;
                       color: black;
   
                       transition: all .3s ease-in-out;
   
                   }
               }
           }
   
       }
   }

}

[SASS FOR HOME BACKGROUND]

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

Answer 1

I think there could be different solutions. One would be to declare the whole header as a flexbox and set the button to the right side with margin-left: auto;. You also could just care about the CSS for an iPhone with specific CSS rules, for example:

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
}