Может кто-нибудь помочь мне с ответом, плз? ⇐ CSS

[Anonymous]

Я хотел бы сделать это адаптивным. Позвольте мне объяснить: классы «.group .rectangle .map» должны оставаться по центру при уменьшении масштаба, но должны отображаться в виде столбца при увеличении масштаба. Спасибо за вашу помощь!

Я не знаю, что еще сказать, но мне придется уточнить этот вопрос. Проще говоря, на странице, которую я создаю, отображаются карточки «участников» с участниками группы в карточках, которые я создал сам.

/* БАЗА */ тело{ семейство шрифтов: «SF Pro Display», без засечек; } заголовок { позиция: абсолютная; цвет фона: #000000; верх: 0; слева: 0; правильно: 0; максимальная высота: 10%; граница: нет; } .меню { дисплей: гибкий; оправдание-содержание: пространство между; выровнять-элементы: по центру; белый цвет; } .menucase { гибкий: 1; выравнивание текста: по центру; размер шрифта: 1.2em; } .logo { положение: относительное; ширина: 1эм; цвет фона: белый; гибкий: 1; } нижний колонтитул { положение: фиксированное; цвет фона: #FBBB04; внизу: 0; слева: 0; правильно: 0; высота: 11%; максимальная ширина: 100%; граница: нет; z-индекс: 3; } .pied { дисплей: гибкий; оправдание-содержание: пространство между; заполнение: 0 5%; выровнять-элементы: по центру; черный цвет; } .casepied { выравнивание текста: по центру; размер шрифта: 1em; } .авторы { дисплей: гибкий; оправдание-содержание: пространство между; отступ: 0 10em; выровнять-элементы: по центру; черный цвет; } .caseauturs { выравнивание текста: по центру; размер шрифта: 1em; } .auteursimg{ максимальная ширина: 100%; высота: авто; фильтр: инвертировать(100%); } .separateur{ граница: нет; border-top: 1px сплошной #000; } /* БАЗА ФИН */ .контейнер { ширина: 100%; маржа: 0 авто; дисплей: гибкий; переполнение: авто; минимальная высота: 100vh; выровнять-элементы: по центру; гибкое направление: столбец; } .мембрес { ширина: 100%; высота: 3353 пикселей; дисплей: гибкий; переполнение: скрыто; положение: относительное; выровнять-элементы: гибкий старт; гибкое сжатие: 0; цвет фона: rgba(255, 255, 255, 1); } /* запись карты */ .прямоугольник { верх: 250 пикселей; слева: 78 пикселей; ширина: 1287 пикселей; высота: 2893 пикселей; дисплей: гибкий; положение: относительное; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .рекСа { вверху: 1988 пикселей; слева: 712 пикселей; ширина: 575 пикселей; высота: 905 пикселей; позиция: абсолютная; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; } .recDj { вверху: 1988 пикселей; слева: 0 пикселей; ширина: 575 пикселей; высота: 905 пикселей; позиция: абсолютная; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; } .рекСал { верх: 994 пикселей; слева: 712 пикселей; ширина: 575 пикселей; высота: 905 пикселей; позиция: абсолютная; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; } .recSy { верх: 994 пикселей; слева: 2 пикселя; ширина: 575 пикселей; высота: 905 пикселей; позиция: абсолютная; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; } .recMh { верх: 0 пикселей; слева: 712 пикселей; ширина: 575 пикселей; высота: 905 пикселей; позиция: абсолютная; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; } .recAy { верх: 0 пикселей; слева: 2 пикселя; ширина: 575 пикселей; высота: 905 пикселей; положение: относительное; цвет границы: rgba(0, 0, 0, 1); стиль границы: сплошной; ширина границы: 5 пикселей; радиус границы: 16 пикселей; z-индекс: 1; } /* дебютная карта */ .карте { верх: 271 пикселей; слева: 81 пиксель; ширина: 1267 пикселей; высота: 2722 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } /* дебютная карта */ .carteSA { вверху: 1988 пикселей; слева: 712 пикселей; ширина: 555 пикселей; высота: 650 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtSA { верх: 247 пикселей; слева: 54 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txt2SA { верх: 363 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .imgSA { верх: 0 пикселей; слева: 164 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; } .ligneSA { верх: 650 пикселей; слева: 55 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; } /* окончательная карточка */ /* дебютная карточка */ .carteDJ { вверху: 1988 пикселей; слева: 0 пикселей; ширина: 555 пикселей; высота: 734 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtDJ { верх: 247 пикселей; слева: 27 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txt2DJ { верх: 363 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .imgDJ { верх: 0 пикселей; слева: 164 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; } .ligneDJ { верх: 734 пикселей; слева: 55 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; } /* плавная карта джамеля */ /* дебютная карта 2 раза */ .carteSA2 { верх: 994 пикселей; слева: 712 пикселей; ширина: 555 пикселей; высота: 650 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtSA2 { верх: 296 пикселей; слева: 158 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txt2SA2 { верх: 363 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .imgSA2 { верх: 0 пикселей; слева: 164 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; } .ligneSA2 { верх: 650 пикселей; слева: 55 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; } /* плавная карта 2 салима */ /* дебютная карта Сильвена */ .carteSY { верх: 994 пикселей; слева: 9 пикселей; ширина: 555 пикселей; высота: 651,9998779296875 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtSY { верх: 296 пикселей; слева: 137 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txt2SY { верх: 403 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .imgSY { верх: 0 пикселей; слева: 148 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; } .ligneSY { верх: 651,9998779296875 пикселей; слева: 47,99794387817383 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; } /* плавная карта Сильвена */ .carteMH{ верх: 0 пикселей; слева: 712 пикселей; ширина: 555 пикселей; высота: 841 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; z-индекс: 1; } .txtMH { верх: 296 пикселей; слева: 189 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txt2MH { верх: 363 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .imgMH { верх: 0 пикселей; слева: 164 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; } .logoGLO { верх: 535 пикселей; слева: 134 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; } .logoGOO { верх: 535 пикселей; слева: 213 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; } .logoRG { верх: 535 пикселей; слева: 371 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; } .logoLI { верх: 535 пикселей; слева: 292 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; } .ligneMH { верх: 507 пикселей; слева: 55 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; } .HPEC { верх: 647 пикселей; слева: 31 пиксель; ширина: 499 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .IoMT { верх: 752 пикселей; слева: 356 пикселей; ширина: 87 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .DVD { верх: 752 пикселей; слева: 95 пикселей; ширина: 233 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .ИИоТ { верх: 806 пикселей; слева: 233 пикселя; ширина: 192 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .Интернет вещей { верх: 806 пикселей; слева: 129 пикселей; ширина: 84 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .txtHPEC { верх: 649 пикселей; слева: 37 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtIIoT { верх: 808 пикселей; слева: 255 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtIoMT { верх: 754 пикселей; слева: 369 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtDVD { верх: 754 пикселей; слева: 101 пиксель; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .ААК { верх: 698 пикселей; слева: 72 пикселя; ширина: 410 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; } .txtAAC { верх: 700 пикселей; слева: 76 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtIoT { верх: 808 пикселей; слева: 153 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } /* плавная карта Махера */ /* дебютная карта Аюба */ .carteAY { верх: 0 пикселей; слева: 2 пикселя; ширина: 555 пикселей; высота: 796 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtAY { верх: 296 пикселей; слева: 172 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 36 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Интер; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .txt2AY { верх: 363 пикселей; цвет: rgba(150, 147, 147, 1); ширина: 555 пикселей; высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .Я гей { верх: 0 пикселей; слева: 164 пикселей; ширина: 216 пикселей; высота: 216 пикселей; позиция: абсолютная; радиус границы: 150 пикселей; z-индекс: 2; } .AYglo { верх: 535 пикселей; слева: 134 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; z-индекс: 2; } .AYgoo { верх: 535 пикселей; слева: 213 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; z-индекс: 2; } .AYrg { верх: 535 пикселей; слева: 371 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; z-индекс: 2; } .AYli { верх: 535 пикселей; слева: 292 пикселей; ширина: 50 пикселей; высота: 50 пикселей; позиция: абсолютная; z-индекс: 2; } .ligneAY { верх: 507 пикселей; слева: 55 пикселей; ширина: 474 пикселей; высота: 1 пиксель; позиция: абсолютная; z-индекс: 2; } .IP { верх: 647 пикселей; слева: 31 пиксель; ширина: 223 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; z-индекс: 2; } .RS { верх: 704 пикселей; слева: 277 пикселей; ширина: 223 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; z-индекс: 2; } .ML { верх: 647 пикселей; слева: 277 пикселей; ширина: 223 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; z-индекс: 2; } .РЕЗЮМЕ { верх: 761 пикселей; слева: 159 пикселей; ширина: 223 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; z-индекс: 2; } .DL { верх: 704 пикселей; слева: 31 пиксель; ширина: 223 пикселей; высота: 35 пикселей; позиция: абсолютная; радиус границы: 15 пикселей; z-индекс: 2; } .txtIP { верх: 647 пикселей; слева: 37 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .txtCP { верх: 763 пикселей; слева: 172 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .txtRM { верх: 706 пикселей; слева: 292 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .txtML { верх: 647 пикселей; слева: 283 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } .txtDL { верх: 706 пикселей; слева: 56 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 25 пикселей; стиль шрифта: Обычный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 400; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; z-индекс: 2; } /* наконец */ /* статус дебюта */ .группа { верх: 188 пикселей; слева: 80 пикселей; ширина: 1277 пикселей; высота: 2033 пикселей; дисплей: гибкий; позиция: абсолютная; выровнять-элементы: гибкий старт; гибкая термоусадка: 1; } .txtST { вверху: 1995 пикселей; слева: 922 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtPD { верх: 1001 пикселей; слева: 202 пикселя; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtECP { цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtECP2 { слева: 717 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtDA { верх: 1001 пикселей; слева: 870 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота строки: нормальная; шрифт-стретч: нормальный; текстовое оформление: нет; } .txtAD { вверху: 1995 пикселей; слева: 134 пикселей; цвет: rgba(0, 0, 0, 1); высота: авто; позиция: абсолютная; размер шрифта: 31 пиксель; стиль шрифта: Жирный; выравнивание текста: по центру; семейство шрифтов: Inter; вес шрифта: 700; высота линии: нормальный; шрифт-стретч: нормальный; текстовое оформление: нет; } /* окончательный статус */` Я пробовал, но не помогло
@media(max-width:810px){ .родитель{ гибкое направление: столбец; } .карте{ ширина: 100%; } .прямоугольник{ ширина: 100%; } .группа{ ширина: 100%; } }