I've created a website in which I used @media screen to make sure the elements sit right on smaller screens. While creating this website, I used the toggle device toolbar feature on google chrome to manage my elements on different screen sizes. Everything looked good and so I published my website; the problem is multiple elements have shifted around and no longer look good on smaller viewport sizes. Also, my chosen fonts disappear when the website is visited on smaller screens but work perfectly fine on a desktop.

(Top one is a screenshot of website through the toggle device toolbar on desktop and the bottom one is a screenshot of the website on my actual phone)

(Same as above)

I'm also missing some images when i visit the website on my iPad. I thought maybe I missed something in my original file, however, everything seems to be working fine. When I use the toggle device toolbar on a laptop, everything's in place; however, when I actually look at the website through my phone everything is different. Im really lost on what to do. Any advice is appreciated.

Ive already added <meta name="viewport" content="width=device-width,initial-scale=1.0"> to all of my HTML files

and this how i've set up all of my queries

/* Iphone 12 pro, Iphone Xr, Iphone X */

@media screen and (max-width: 390px)  {
   .girl {
     background-image: url(Images/Iphone12pro.gif);
    background-size: 100%;
    width: 100% !important;
    height: 150%;
    position: absolute;
    background-repeat: no-repeat;
   margin-top: 0%;
   z-index: 8000;
cursor: url(Cursors/3.png), auto;
 }
}