CSS для одного столбца изображений вместо двух в Grid Plus

Question

http://maxvision.co.jp/

Я использую плагин под названием Grid Plus и, как видно на домашней странице, есть 3 столбца. На других страницах я хочу использовать Grid Plus для изображений, но с одним столбцом, который не доступен в настройках плагина. Есть ли какой-нибудь CSS, который я мог бы использовать, чтобы сделать его одним столбцом?

Answer 1

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

.grid-stack.grid-stack-one-column-mode>.grid-stack-item {
    position: relative!important;
    width: auto!important;
    left: 0!important;
    top: auto!important;
    margin-bottom: 20px;
    max-width: none!important;
}

, вы можете попробовать css с указанными выше классами и посмотреть, если вы получите какие-то результаты. Он добавляет этот класс, когда он достаточно мал, через JavaScript. Так что он не будет работать с этим классом, но этот css может работать внутри классов, которые я разместил выше.

Answer 2

Похоже, что они, вероятно, используют какую-то сеточную систему, очень похожую на https://isotope.metafizzy.co/ или одну из других подобных ей.

Вы должны иметь возможность переопределить класс ширины на этой конкретной странице. Как эта страница, на которую вы ссылаетесь, является домашней, так что она имеет класс тела .home или .page-id-2115, другие страницы будут иметь похожие классы тела.

.grid-stack.grid-stack-2>.grid-stack-item, .grid-stack.grid-stack-2>.grid-stack-item[data-gs-min-width='1'] {
    min-width: 100% !important;
}

или

.grid-stack.grid-stack-2>.grid-stack-item[data-gs-width='1']  {
    width: 100% !important;
}

Возможно, вам придется взглянуть на сетку, которую вы строите, на странице, на которой вы хотите ее использовать. Но способ, которым я объяснил это ранее при использовании класса body для page-id-5275 и вышеупомянутых классов, должен работать. Возможно, вам придется использовать оба вместе, чтобы переопределить существующий css. Но вы можете добавить это в файл childs css, и он должен работать. Без доступа я не могу точно сказать, но из моего опыта с этими типами плагинов он использует css, чтобы установить его ширину, а затем вычисляет высоту для сетки на основе того, что говорит CSS.