Мобильная версияМне нужно создать подобный контент, однако он не реагирует при переключении на разные экраны. Я прилагаю скриншот для экрана меньшего размера, и вы можете видеть, что элементы перекрываются. на экране xs, маленьком и среднем - Также, пожалуйста, дайте мне знать, какие изменения мне следует внести еще, чтобы сделать его идеальным? Я новый разработчик пользовательского интерфейса. Заранее спасибо.
маленькое —
средний —
большой-
бывший крупный-
HTML-код –
Номер решения ИСХ0067537-001
Имя решения Мое решение 67537... LTO 12 дней долларов США 013232440.00 Перейти на портал дизайна
Соответствующий CSS-
* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } .контейнер-жидкость { ширина: авто; высота: 53 пикселей; отступы: 5 пикселей 10 пикселей; фон: #FFF; /* Высота / 03 dp */ box-shadow: 0px 1px 3px 0px rgba(51, 51, 51, 0.14), 0px 2px 4px 0px rgba(51, 51, 51, 0.12), 0px 1px 5px 0px rgba(51, 51, 51, 0.14); } .heading1 { цвет: var(--greyscale-se-dark-grey-626469, #626469); /* Абзац/P-Nano-Regular-12|15 */ семейство шрифтов: Nunito; размер шрифта: 12 пикселей; стиль шрифта: нормальный; вес шрифта: 400; высота строки: 20 пикселей; /* 166,667% */ } .content1 { цвет: var(--greyscale-se-dark-grey-626469, #626469); семейство шрифтов: Nunito; размер шрифта: 16 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: 25 пикселей; /* 156,25% */ } .mainFirst { дисплей: гибкий; } .div3 { поле слева: 10 пикселей; } .lto { цвет: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4); выравнивание текста: по правому краю; /* Заголовки/P-Bold-14|20 */ семейство шрифтов: Nunito; размер шрифта: 14 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: 20 пикселей; поле слева: 10 пикселей; /* 142,857% */ } .hisIcon { поле слева: -10 пикселей; заполнение: 0 авто; } .div5 { цвет: var(--se-green-super-life-green-24-b-43-f, #24B43F); /* Абзац/P-Small-Bold-14|20 */ семейство шрифтов: Nunito; размер шрифта: 14 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: 20 пикселей; /* 142,857% */ } .доллар США { цвет: var(--greyscale-medium-grey-9-fa-0-a-4, #9FA0A4); выравнивание текста: по правому краю; /* Заголовки/P-Bold-14|20 */ семейство шрифтов: Nunito; размер шрифта: 14 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: 20 пикселей; /* 142,857% */ } .div7 { цвет: var(--se-green-super-life-green-24-b-43-f, #24B43F); выравнивание текста: по правому краю; /* Абзац/P-Big-Bold-18|30 */ семейство шрифтов: Nunito; размер шрифта: 18 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: 30 пикселей; поле справа: -16 пикселей; /* 166,667% */ } . SecondMainDiv { дисплей: гибкий; выровнять-контент: гибкий конец; оправдание-содержание: пространство между; отступ: 5 пикселей; высота: подходящее содержание; выровнять-элементы: базовая линия; разрыв: 4 пикселя; } .divButton { дисплей: гибкий; высота: 34 пикселей; отступы: 6 пикселей 12 пикселей; justify-content: flex-end; выровнять-элементы: по центру; радиус границы: 2 пикселя; фон: var(--se-green-super-life-green-24-b-43-f, #24B43F); } .btnLabel { цвет: var(--neutral-light-n-0, #FFF); выравнивание текста: по правому краю; /* Кнопки / Button-Medium-Bold-16|Авто */ семейство шрифтов: Nunito; размер шрифта: 16 пикселей; стиль шрифта: нормальный; вес шрифта: 700; высота строки: нормальная; }
