Хобрук: Ваш путь к мастерству в программировании

Адаптивная галерея Business Catalyst

Я сделал около 20 веб-сайтов, которые включали модуль галереи Business Catalyst. Это первая проблема, с которой у меня возникли проблемы, и я не знаю, почему. Пожалуйста, проверьте: http://topspindenver.businesscatalyst.com/gallery.html.

Вы заметите, что если вы уменьшите окно, миниатюры галереи начнут переполнять окно. На всех других веб-сайтах, которые я делал, галерея была отзывчивой в пределах указанных столбцов скелета, а миниатюры автоматически уменьшались, как на этом сайте: http://mountaingardendiva.com/.

Кто-нибудь знает, почему это происходит только на этом сайте? Я уже пытался специально настроить таргетинг на стол, в котором находятся миниатюры, и присвоить ему max-width:100%, но это не сработало.

html css responsive-design business-catalyst
13.08.2013

Ответы:


1

Я предполагаю, что вы используете Firefox для просмотра этого сайта и впервые замечаете эту проблему, потому что в Chrome он выглядит нормально. Это связано с тем, как Firefox вычисляет ширину таблицы и максимальную ширину изображений в таблице. Вы можете решить эту проблему, применяя max-width к td.photogalleryitem с каждым медиа-запросом, который изменяет ширину страницы.

19.08.2013

2

Это работает в Chrome, но чтобы заставить его работать в FireFox, попробуйте установить CSS для ваших изображений на ширину: 100% вместо максимальной ширины: 100%

12.03.2016
Новые материалы
Введение в контекст React
В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..
Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..
Это оно
Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..
7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...
Базовое руководство по переносу концепций обучения в глубокое обучение
Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..
C в C.R.U.D с использованием React-Redux
Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..
5 обязательных элементов современного инструмента конвейера данных
В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..