Почему этот код действует по-разному в Chrome и Firefox / Как это исправить?

Question

В Chrome, если я просматриваю этот код с шириной более 1090 пикселей, затем уменьшаю ширину до уровня ниже 1090 пикселей, а затем поднимаю его до уровня выше 1090 пикселей, правый столбец отображается под левым столбцом. То, как это выглядит / действует в firefox, больше похоже на то, что я пытаюсь выполнить sh.

Моя текущая версия Chrome: Версия 80.0.3987.132 (Официальная сборка) (64-разрядная) )

Я обнаружил, что мне пришлось использовать опцию "раскрыть фрагмент", чтобы увидеть поведение здесь.

.fourSquareImages img{
    max-width:100%;
    height: auto;
}
#leftImages {
    width: 65%;
    text-align: center;
    display: table-cell;
}

#rightImages {
    width: 35%;
    text-align: center;
    display: table-cell;
}
@media only screen and (max-width: 1090px){
  #leftImages {
      width: 48%;
      display: inline-block;
  }
  
  #rightImages {
      width: 48%;
      display: inline-block;
  }
}

<div class="fourSquareImages">
    <div id="leftImages">
      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/deco_bracelet.jpg" width="243" height="186" alt="Art Deco Bracelets"><br>
      <span class="caption">Art Deco Bracelets</span><br>

      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/pansy.jpg" width="243" height="186" alt="Diamond Broaches"><br>
      <span class="caption">Diamond Broaches</span><br>
    </div>
    <div id="rightImages">
      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/rolex_yacht_master.jpg" width="243" height="186" alt="Rolex Watches."><br>
      <span class="caption">Rolex Watches</span><br>

      <img border="0" src="http://www.davidreynoldsjewelryandcoin.com/images/estate/opal_ring.jpg" width="243" height="186" alt="Opals"><br>
      <span class="caption">Opals</span><br>
    </div>
  </div>

Answer 1

Максимальная ширина медиазапроса составляет 1090 пикселей. Это означает, что медиазапрос будет применяться только в том случае, если максимальный размер составляет 1090 пикселей в ширину. В противном случае веб-браузер будет игнорировать медиа-запрос. Одним из способов решения этой проблемы является создание нескольких медиа-запросов для разных размеров. Другой способ - удалить медиазапрос. При удалении медиазапроса все правила стиля будут применяться независимо от ширины и высоты экрана.