Как убрать заголовок, чтобы блок стал адаптивным?

Question

[a16a]

Всем привет.
Я не очень опытен в верстке, и столкнулся с такой проблемой: нужно сделать этот блок адаптивным.
https://codepen.io/iremlopsum/pen/OVMxzp?editors=1100
Самый логический на мой взгляд это убрать тексты в заголовок вкладках. Например на мобильном была только иконки слева.
Как это можно реализовать?

Answer 1

[Руслан Полин]

Обернуть заголовки в дополнительный блок и скрывать его если ширина экрана, например, 600.

<li class="choose active">
   <div class="icon active">
      <svg viewBox="0 0 32 32">
        <g filter="">
           <use xlink:href="#shopping-cart"></use>
         </g>
       </svg>
      </div>
     <span class="block"> Choose </span>
    </li>

@media screen and  (max-width: 600px) {
  .block{
   display:none;
  }
}