Не применяется свойство

@Fixmon · Регистрация: 26.03.2025

Студворк — интернет-сервис помощи студентам

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.test {
    --gg:clamp(10px, 2cqw, 15px);
    container-type: inline-size;
    display: flex;
    row-gap: var(--gg);
    flex-direction: column;
    width: 100%;
    @container (width < 800px) {
        & {
            margin-bottom:var(--gg) !important;
            width: 100% !important;
            >.test2 {
                 display:none;
            }
        }
    }
}

Ширина менее 800, срабатывает, но свойства

CSS
1
2
margin-bottom:var(--gg) !important;
width: 100% !important;

Не применяются к текущему блоку, хотя блок test2, успешно находит и пременяет свойства

@voraa · 25.05.2025, 09:25

Вы пытаетесь применить правило к самому контейнеру.
Правила применяются только к элементам потомкам.

@Fixmon · 26.05.2025, 00:40 **[ТС]**

все верно, по умолчанию выставлены одни свойства, при ширине контейнера менее 800, необходимо еще присвоить свойство.
Вот только нижний отступ не срабатывает, в чем тут дело?

@voraa · 26.05.2025, 20:23

Вот так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.test {
    --gg: calc(clamp(10px, 2%, 16px) * max(sign(800px - 100%), 0));
    container-type: inline-size;
    display: flex;
    row-gap: var(--gg);
    flex-direction: column;
    width: 100%;
    margin-bottom:var(--gg) !important;
    @container (width < 800px) {
        >.test2 {
            display:none;
        }
    }
}

вроде работает в Файрфоксе (в Сафари вроде тоже).
Если тебе не срочно, подожди чуток и в Хроме тоже сделают функцию sign. (вроде в 138 обещали)

@Fixmon · 27.05.2025, 02:09 **[ТС]**

margin-bottom:var(--gg) !important;

Применяешь по умолчанию, я же пытаюсь применить свойство в том случаи, когда ширина контейнера менее 800.
Как это сделать,

@voraa · 27.05.2025, 06:53

Сообщение от Fixmon

Применяешь по умолчанию, я же пытаюсь применить свойство в том случаи, когда ширина контейнера менее 800.
Как это сделать,

Какой должен быть margin-bottom при ширине >= 800px? И какой должен быть при ширине < 800px?
important обязателен? Его что то пытается переопределить при меньшей ширине?

@Fixmon · 03.06.2025, 17:19 **[ТС]**

Сообщение от voraa

important

Не обязателен, если ширина более 800, нижний отступ не нужен. То есть вовсе не указывать, при меньшей ширине, присвоить любой отступ. Лишь бы работало

@voraa · 03.06.2025, 17:37

Сообщение от Fixmon

Не обязателен, если ширина более 800, нижний отступ не нужен. То есть вовсе не указывать, при меньшей ширине, присвоить любой отступ. Лишь бы работало

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@voraa 1256 / 1203 / 179 Регистрация: 21.01.2024 Сообщений: 5,559
	25.05.2025, 09:25
	Вы пытаетесь применить правило к самому контейнеру. Правила применяются только к элементам потомкам. 1

@Fixmon -28 / 0 / 0 Регистрация: 26.03.2025 Сообщений: 181
	26.05.2025, 00:40 [ТС]
	все верно, по умолчанию выставлены одни свойства, при ширине контейнера менее 800, необходимо еще присвоить свойство. Вот только нижний отступ не срабатывает, в чем тут дело? 0

@Fixmon -28 / 0 / 0 Регистрация: 26.03.2025 Сообщений: 181
	27.05.2025, 02:09 [ТС]
	margin-bottom:var(--gg) !important; Применяешь по умолчанию, я же пытаюсь применить свойство в том случаи, когда ширина контейнера менее 800. Как это сделать, 0