Question

Привет. У моего сайта на главной странице есть меню. Для телефонов я хочу сделать чтобы оно было в 2 колонки. Я изменил код на следующий:

 @media only screen and (max-width:480px){ul.list-services,ul.specialists{display:grid;display:-ms-grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));-ms-grid-columns:1fr 14px 1fr 14px 1fr 14px 1fr;grid-gap:14px}} @media only screen and (max-width:480px){figure.effect-jul img{max-width:none;width:auto;height:200px;-o-object-fit:cover;object-fit:cover;transition:opacity 1s,transform 1s;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block}} @media only screen and (max-width:480px){figure.effect-jul figcaption,figure.effect-jul figcaption>a{position:absolute;top:0;left:0;width:40%;height:100%}}

Колонка, которая была на всю страницу, тепер по ширине меньше половины. Но вторая колонка не делается. Не подскажете что нужно сделать? Спасибо.

Answer 1

В стилях строка номер 1004:

ul.list-services{grid-template-columns:auto}

замените auto на 2