Please, I am new here and I need your help. This website is perfect for desktop view and when the screen on desktop is low, but does not show the whole site on mobile. I’ve included all the media queries, but only the first header elements appear on the mobile iPhone 6. I’ve added meta tags but to no avail. Can you tell me what’s wrong with my code? Your solution is much appreciated. This is my codepin link.

<html> 
<head>
  <title>collins Photography</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">

</head>

<body>
  <main>
    <div id="heading">
      <div id="heading-text">
        <div id="heading-inner-text">
          <h1>Jane's Photography</h1>
          <h2>Weddings And Kids</h2>
          <a href="#images" class="btn" id="view-work"> view work </a>
        </div>
      </div>

      <div id="landing-image"></div>
    </div>
    <div id="images">
      <div id="image-heading">
        <h2>Our Work<h2>
      </div>
    </div>

    <img src="https://media.istockphoto.com/photos/happy-wedding-photography-of-bride-and-groom-at-wedding-ceremony-picture-id1190043570?k=20&m=1190043570&s=612x612&w=0&h=4ucKegbD9AHd99kH5uEqrtm5zovyZ6IsYa33hR2pV-k=" alt="">

    <div class="caption">
      <h3> Royalty <h3>
          <p>Couples who get married between the ages of 28 and 32 are far more likely to stay together for the long haul
          <p>

    </div>

    <img src="https://media.istockphoto.com/photos/heres-to-the-beginning-of-our-happily-ever-after-picture-id1303804580?b=1&k=20&m=1303804580&s=170667a&w=0&h=wSgn20MtKU-aCSTLt7NQ_an_SAlQUGgsqFiBg8EonRM=">

    <div class="caption">
      <h3> Dignity <h3>
          <p>Ending the ceremony with a kiss because, according to ancient Rome, the kiss is a legal bond that seals the contract
          <p>

    </div>

    <img src="https://media.istockphoto.com/photos/african-couple-picture-id1177074168?k=20&m=1177074168&s=612x612&w=0&h=htqlkLHZmdgMi6uDW9Yr6z5AseFGVMr3MUHu9Spg0lE=">

    <div class="caption">
      <h3> Satisfaction <h3>
          <p>True News: Marriage does more to promote life satisfaction than money or sex
          <p>

    </div>

    <img src="https://static.independent.co.uk/2021/05/22/13/newFile-1.jpg?width=640&auto=webp&quality=75" </main>

    <footer>
      <h3> Contact Us </h3>
      <p> Email or call us to setup a consult
      <p>
      <p> Email:
        <strong>janesphotos@gmail.com </srtong>
      </p>

      <p> Phone:
        <strong> (+1) 813 901 7777 </strong>
      </p>
    </footer>

</body>
<html>


<style>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

#heading {
  background: white;
  display: flex;
  height: 100vh;
}

#heading-text {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 40vw;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-right: 1rem;
  padding-left: 1rem;
}

body {
  font-family: Montserrat;
  background: #eee;
  height: auto;
  margin: 0;
  display: block;
}

main {
  max-width: 900px;
  margin: auto;
  box-shadow: 30px 0px 40px rgb(0 0 0 / 10%), -30px 0px 40px rgb(0 0 0 / 10%);
  display: block;
}

#heading-inner-text {
  text-align: center;
}

h1 {
  font-weight: 400;
  font-size: 2.5rem;
  text-transform: uppercase;
  margin: 0;
  display: block;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
h2 {
  font-weight: 400;
  font-size: 1.2rem;
  text-transform: capitalize;
  margin: 0;
  color: #888;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#image-heading h2 {
  border-left: dotted 1px #fff;
  border-right: dotted 1px #fff;
  display: inline-block;
  padding-right: 1rem;
  padding-left: 1rem;
  font-weight: 400;
  font-size: 1.2rem;
  text-transform: capitalize;
  margin: 0;
  color: white;
}

img {
  display: block;
  width: 100%;
}

.btn {
  padding: 0.5rem 2rem;
  border: 1px #ccc solid;
  display: inline-block;
  margin: 2rem 0 0;
  border-radius: 50px;
  text-decoration: none;
  color: #333;
  transition: background 500ms ease;
}

#landing-image {
  background: url(https://images.unsplash.com/photo-1522206024047-9c925421675b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 0 1 60vw;
  margin: 0;
}

#images {
  display: block;
}

#image-heading {
  padding: 1.5rem;
  text-align: center;
  background: #333;
  color: #fff;
}

h3 {
  display: block;
  font-size: 1.2em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: black;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}

.caption {
  padding: 0.8rem;
  text-align: center;
  display: block;
}

footer h3 {
  font-size: 3rem;
  margin-bottom: 0;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  text-align: center;
  color: black;
}

footer {
  display: block;
  text-align: center;
  padding: 2rem 1rem;
  margin: auto;
  color: #333;
}

@media only screen and (max-width: 815px) {
  #heading {
    background: white;
    display: block;
    height: 100vh;
  }

  #heading-text {
    height: 50vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  #landing-image {
    background: url(https://source.unsplash.com/De8wMYoSSBc);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50vh;
    flex: 0 1 60vw;
    margin: 0;
    display: block;
  }

  p {
    justify-content: center;
  }

  body {
    font-family: Montserrat;
    background: #eee;
    height: auto;
    margin: 0;
    display: block;
  }
}


</style>