Попытка разбить столбцы 4-х элементов на столбцы 2, с @media - PullRequest
Новая
       8

Попытка разбить столбцы 4-х элементов на столбцы 2, с @media

0 голосов
/ 21 апреля 2020

У меня проблема, я показываю что-то на своей странице, используя только элемент. У меня есть ряд из 4 элементов, и я хочу создать @media, который разбивает его на 2 строки и 2 столбца.

Я использую это, и он работает для меньшего экрана 

        .tipinfo{
            font-size: 20px;
            height: auto;
        }
        thead th:not(:first-child) {
          display: none;
        }
        th {
          display: flex;
          clear: both;
        }
      }

и теперь я хочу построить его для @media only screen and (max-width: 767px)

Моя таблица выглядит следующим образом enter image description here

и работает так enter image description here

Я просто хочу в строках ... Если кто-то может помочь?

Я использую это: 

        width:100%;
        width:25%;
        text-align:center;
        border-spacing: 0;
    }
table th strong {
    color: #f36100;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 120px;
}
table th .won {
    color: green;
    font-size: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

<img src="img/tips/freetips.png" alt="Logo" style="width:70px; height:70px;display:inline; border-radius: 30%;">

и это код html 

<table style="width:100%">
<th><img src="img/tips/freetips.png" alt="Logo" style="width:70px; height:70px;display:inline; border-radius: 30%;"></th> 
<th> <strong> Duplanje</strong></th>
<th><div class="won">won</div></th>
<th><button data-id="1" type="button" class="tipinfo btn btn-light" style="font-size:50px; line-height:50px; background: #f36100; border-color: #f36100; color:white; float:right;  border: 3px solid white;   border-radius: 20px;">5 unita</button></th>
</table>
...