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

[W O R K I N G ]

Here is how it looks on my desktop (https://imgur.com/A5TpUu2)

My friend's phone which isn't an iphone (https://imgur.com/V0Khmjq)

Iphone 11 according to 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{
       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;```
cssiossassdeploymentmobile-webkitc#arraysgraph


Solution 1:[1]

Assuming that every city is connected to every other city by 3 or less different roads. For each road, you need to store 3 items ( source, destination and cost ) Assume that an item requires 4 bytes of storage.

5000 * 5000 * 3 * 4 = 3 * 10^8

That is 300 Megabytes of storage.

Any modern computer should have no problem storing this - memory is usually measured these days in Gigabytes.

You have some problem with your computer!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions