Наложение значков SVG на другое изображение в Ionic 4. Нужно, чтобы оно было отзывчивым

Question

Я пытаюсь получить прикрепленное изображение значка, которое должно реагировать на все экраны и не должно сжиматься или перемещаться ни на одном из экранов. Всего 4 изображения: 1 - фоновое изображение, а остальные три - значки svg.

---

 <ion-row>
 <ion-col text-center class="icons middle" size="12">
<ion-img class="icons1" style="margin-left: auto ; margin-right: auto; " 
 class="whitecircle" src="../../../assets/login/white_circle.svg"></ion-img>
    <ion-row text-center class="icon-row">
      <ion-col class="icons2">
        <ion-img src="../../../assets/login/facebook_logo.svg"></ion-img>
      </ion-col>
      <ion-col class=" icons3">
        <ion-img src="../../../assets/login/twitter_logo.svg"></ion-img>
      </ion-col>
      <ion-col class=" icons4">
        <ion-img src="../../../assets/login/google_logo.svg"></ion-img>
      </ion-col>
    </ion-row>
  </ion-col>
 </ion-row>

---

.icon-row{
    position: absolute;
    bottom: 0;
}
.icons{
    display: grid;
    width: 42px;
}
.icons1{
    grid-row: row 1;
}

.icons2{
    grid-row: row 1/ span 3;
}

.icons3{
    grid-row: row 1/ span 3;
}

.icons4{
    grid-row: row 1/ span 3;
}

Answer 1

То, что вы сказали, является противоречием.

• «Отзывчивый» означает, что он корректируется.

• «Оно не должно сжиматься или двигаться» означает, что оно не реагирует.

Функция ion-row и ion-col предназначена для построения отзывчивой структуры.

Если вы не хотите этого, просто сложите все в один div.

Вы можете применить CSS white-space: nowrap; к div, чтобы он не разбивал содержимое независимо от размера дисплея.