Как заставить изображения появляться в мобильных браузерах, которые уже появляются в мобильных симуляторах

Question

Я занимаюсь разработкой мобильного CSS на веб-сайте, который я создаю, и у меня есть несколько изображений, которые прекрасно отображаются на версии сайта Destkop, а также встроенный мобильный симулятор в Chrome, но не отображаются в актуальные мобильные браузеры - на iOS или Android.

Я пытался настроить CSS и реорганизовать HTML, но пока ничего не получалось.

HTML:

 <div class="cards-container">
  <div class="card-container">
   <div class="card">
    <div class="front">
        <p class='card-text'>
        Brie Ghallagher
        <br>
        Club President
        </p>
    </div>
    <div class="back">
      <img src="../images/brie.jpg" style="width:300px; height:300px;">
    </div>
    </div>
  </div>
</div>

CSS:

 .cards-container{
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: block;
  margin-left: 2.3em;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
     -ms-flex-pack: center;
         justify-content: center;
 }

 .card-container {
  margin-top: 2em;
  width: 300px;
  height: 300px;
 }

 .card {
  width: 300px;
  height: 300px;
 }

 .front {
  width: 300px;
  height: 300px;
}

 .back {
   width: 300px;
   height: 300px;
 }

Как я уже говорил выше, он прекрасно работает в мобильном симуляторе Chrome, но когда я загружаю его в Heroku и просматриваю в реальном мобильном браузере, изображения не отображаются. Есть некоторый связанный javascript, но это оживляет карту, и я не думаю, что это должно повлиять на мою проблему. Что я делаю не так?