I decided to redo my personal website (www.coltstreet.com), and I am using media queries to display different background images. Everything is working fine on desktop and I was using chrome tools to test the various device sizes and those all showed up fine as well.

After deploying my site, it works on desktop and in chrome tools but not when I pull it up on my actual phone. And I have no idea how to fix this. I tried resizing the image from the first size I had it but that didn’t work. I’ve tried the chrome browser on my phone and safari, neither work, nor does a different persons phone. So it must be something with the coding.

This is my styles.

.showcase-button {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

.showcase:hover {
    opacity: 0.7;
    cursor: pointer;
}

.about-me-section {
    background: url("/assets/about-me-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F7F7F7 !important;
}



.home-section {
    background: url("/assets/home-bk.png");
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white !important;
    font-size: 12px !important;
}

@media (max-width: 480px) {
    .home-section {
        background: url("/assets/home-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .home-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .home-section {
        background: url("/assets/home-bk-tablet.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 480px) {
    .about-me-section {
        background: url("/assets/about-me-bk-phone.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 16px !important;
    }
}

@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
    .about-me-section {
        background: url("/assets/about-me-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1024px) and (min-width: 481px) and (orientation: landscape) {
    .about-me-section {
        background: url("/assets/home-bk-tablet-vert.png");
        background-position: bottom center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

And here is my HTML:

<app-header></app-header>
<div #home name="home" class="h-screen home-section">

</div>
<div #portfolio name="portfolio" class="h-full bg-gray-100">
  <div class="grid m-0 pt-6">
    <div class="col-12 lg:col-6 relative showcase" (click)="goToLink(1)">
      <img src="assets/natrium-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase lg:mt-8" (click)="goToLink(2)">
      <img src="assets/urban-sweets-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase" (click)="goToLink(3)">
      <img src="assets/carolecolt-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
    <div class="col-12 lg:col-6 relative showcase lg:mt-8" (click)="goToLink(4)">
      <img src="assets/hoopfire-showcase.png" alt="Image" class="w-full border-round-3xl shadow-4">
    </div>
  </div>
</div>
<div #about name="about" class="h-screen about-me-section">
  <div class="flex h-full p-8 lg:p-0 lg:justify-content-end lg:align-items-center">
    <div class="w-full text-center lg:text-right lg:w-5 lg:mr-8 lg:text-3xl">
      <p style="background: #ffffffa8;">
        I am a full stack developer with a personal priority focus on front end development and web design. I currently
        reside
        in Charlotte, NC. and work for Data Ventures. Developing unique and engaging websites and web applications is a
        passion of mine. Most of my current work (along with this website) exhibits my proficiency in the utilization of
        Angular. However, I enjoy expanding my knowledge by learning new and exciting languages that will help to further
        my
        craft in web development.
      </p>
      <p style="background: #ffffffa8;">
        When I'm not immersed in code and web applications, I enjoy sports of almost any kind. Because of the complexity
        and
        spontaneity of these two worlds, finding ways to incorporate web design and sports has become a passion of mine.
        Apart
        from this, my aspirations include exploring new ways to display and interact with the user, regardless of the
        content.
        Overall, I enjoy building websites and creating web applications, watching movies and playing basketball with my
        amazing wife (3x Co-Ed league champs), hanging out with our adorable Miniature Dachshund, watching my son grow up,
        sipping on a nice cold beer, and just enjoying what life decides to throw at me.
      </p>
    </div>
  </div>
</div>