title: Mobile version keeps turning by img to a horizontal position?
body: <p>I have a website with a font-end running on Angular 9. There is a vertical image that, on some mobile browsers (FireFox, Edge), would change to a horizontal position. Why is it doing that and how can I fix it? I have already tried to connect my pc to the mobile browser but I have to use a different browser(FireFox Nightly) to do that. Website: anthonyrodriguez.me . --Click About in the Website. Here is the css and html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.aboutCom{
      height: 100%;
      width: 100%;
      background-color: #1b242f;
      display: block;
      padding-top: 20px;
  }
  
  .portPic {
      width: 45%;
      height: auto;
      display: inline-block;
      vertical-align: top;
      padding-bottom: 10px;
      background-position: initial;
  
  }
  
  img{
      margin-top: 20px;
      max-height: 500px;
      max-width: 500px;
      border-radius: 3%;
      box-shadow: 5px 6px black;
  }
  
  .aboutDesc{
       padding-top: 10px;
       padding-left: 3%;
       text-align: left;
       width: 500px;
       height: auto;
       background-color: #0bc4cd;
       display: inline-block;
       padding-bottom: 20px;
       box-shadow: 0px 0px 62px 2px aqua;
  
  }
  
  .aboutDesc p{
      margin-top: 21px;
      font-family: 'Share Tech';
      font-size: 26px
  
  }
  
  .aboutDesc h2{
      margin-left: 5px;
      font-family: 'Share Tech';
      font-size: 28px;
  }
  
  
  @media screen and (min-width: 870px) and (max-width: 950px){
      .portPic{
          width: 40%;
      }
  }
  @media screen and (min-width: 825px) and (max-width: 869px){
       .portPic{
          width: 35%;
       }
  }
  
  @media screen and (min-width: 100px) and (max-width: 824px){
      .aboutDesc{
          display: block;
          width: auto;
          text-align: center;
      }
      .aboutCom{
          height: 100%;
      }
      .portPic{
          width: 100%;
      }
      .aboutDesc p{
          padding-right: 3%;
      }
  
  }
  @media screen and (min-height: 100px) and (min-height: 600px){
      .aboutCom{
          height: 150%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="aboutCom"&gt;
  &lt;div class="portPic"&gt;
      &lt;img src="./assets/images/meC.jpg"&gt;
  &lt;/div&gt;
  &lt;div class="aboutDesc"&gt;
      &lt;h2&gt;Based in Orange County, California.&lt;/h2&gt;
      &lt;p&gt;As a Full Stack Web Developer, I enjoy working with
          effects for UI/UX and discovering new and better solutions
          to challenging problems. Always open to working on existing
          projects or creating them from scratch. If I'm not coding,
          researching different techologies, or spending time on StackOverflow,
          I'm spending time with the Family.
      &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>