Проблема галереи WP, не отвечающая на мобильные устройства

Question

Я помогаю в уборке и обновлении веб-сайта для организации друзей / художественного заведения.

Мы работаем над Галереей изображений последних лет бизнеса. Смотрите ссылку на одну из галерей-> http://www.stallbergsgruva.se/2018-2/

Моя проблема заключается в том, что при просмотре страницы на мобильном устройстве (Android и Iphone) галереи плавятся вместе и не отображаются должным образом. Например, было бы неплохо, чтобы они были все в одном столбце или двух, но атлас был разделен и не размазан, как сейчас.

Я ищу код CSS, который позаботится об этом. Я пробовал кучу разных кодов, которые я нашел по похожим проблемам, но ничто не влияет на мою галерею. Я новичок в этом коде так много, я что-то упустил?

Я новичок в коде, но могу справиться с этим, если вы добавите более подробное описание того, какой код и куда его добавлять и т. Д.

Заранее спасибо! // Эрик

Answer 1

Это может быть сделано путем определения ширины в медиа-запросах. Я вижу, вы определили

.gallery-width: calc((100% - 16px)/2

Измените его на .gallery-width:100% в тех разрешениях, которые вам требуются. Более подробную информацию о медиа-запросах можно найти на

Медиа-запросы

Код Снимок экрана внутри консоли

Итак, в вашем случае давайте предположим, что до 600px вам нужен этот результат, вот как будет выглядеть медиазапрос, который нужно добавить в ваш файл CSS:

@media screen and (max-width: 600px) {
  .wp-block-gallery .blocks-gallery-item{
     width :100%;
}
}