Код для встраивания Google Sites, как удалить ненужные отступы ⇐ CSS
-
Гость
Код для встраивания Google Sites, как удалить ненужные отступы
Этот элемент встроен в мой сайт Google. Чтобы индикатор выполнения правильно отображался на мобильном сайте, мне нужно перетащить контейнер до огромных размеров, иначе при просмотре с мобильного устройства появятся полосы прокрутки. Но в настольном приложении есть огромные белые пробелы.
Индикатор прогресса пожертвования @import url('https://fonts.googleapis.com/css?family ... ns:400,500'); .индикатор { плыть налево; радиус границы: 6 пикселей; высота: 20 пикселей; фон: линейный градиент (-90 градусов, #fdc700, #ffde66); z-индекс: 1; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); поле сверху: 1 пиксель; } .donation-информация { высота: 80 пикселей; /* Уменьшенная высота */ отступ: 0 пикселей; /* Скорректированные отступы */ шрифт: 500 20px/1 «Open Sans»; дисплей: гибкий; выровнять-элементы: по центру; } .целевая сумма { дисплей: блок; плавать: вправо; начертание шрифта: жирный; высота: 5 пикселей; } @media только экран и (максимальная ширина: 540 пикселей) { .goal-amount {выравнивание текста: вправо; } .raising-info { ширина: 10%; выравнивание текста: по левому краю; } } .progress-bar-wrap { положение: относительное; ширина: 100%; высота: 22 пикселей; радиус границы: 6 пикселей; фон: #dee0e0; переполнение: скрыто; box-shadow: 0 2px 3px rgba(0, 0, 0, 0,5) вставка; } .update-текст { позиция: абсолютная; внизу: 0; правильно: 0; размер шрифта: 10 пикселей; отступ: 5 пикселей; семейство шрифтов: «Open Sans»; /* Применить семейство шрифтов Open Sans */ } .raising-info { ширина: 100%; высота: 5 пикселей; заполнение: 0; /* Удалены отступы */ плыть налево; } .raising-amount, .raising-label { дисплей: блок; размер шрифта: 20 пикселей; плыть налево; поле справа: 10 пикселей; } .raising-amount { шрифт-вес: жирный; } .goal-words { размер шрифта: 20 пикселей; поле справа: 10 пикселей; высота: 5 пикселей; } ПОДНИМАН 5000 ₹ ЦЕЛЬ 50 000 ₹ Это число обновляется каждые 24 часа функция updateProgressBar(raisingAmount) { константная цельAmount = 50000; константный процент = (поднятая сумма / сумма цели) * 100; const ProgressBar = document.querySelector(".progress-bar"); ProgressBar.style.width = процент + «%»; const поднятыйAmountElement = document.querySelector(".raising-amount"); поднятыйAmountElement.textContent = "₹" + поднятыйAmount.toLocaleString("en-IN"); } константная начальная сумма = 7698; updateProgressBar (initialRaizedAmount); Я пробовал поработать с отступами и высотой контейнера, но понятия не имею, как это исправить. Помощь приветствуется.
Этот элемент встроен в мой сайт Google. Чтобы индикатор выполнения правильно отображался на мобильном сайте, мне нужно перетащить контейнер до огромных размеров, иначе при просмотре с мобильного устройства появятся полосы прокрутки. Но в настольном приложении есть огромные белые пробелы.
Индикатор прогресса пожертвования @import url('https://fonts.googleapis.com/css?family ... ns:400,500'); .индикатор { плыть налево; радиус границы: 6 пикселей; высота: 20 пикселей; фон: линейный градиент (-90 градусов, #fdc700, #ffde66); z-индекс: 1; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); поле сверху: 1 пиксель; } .donation-информация { высота: 80 пикселей; /* Уменьшенная высота */ отступ: 0 пикселей; /* Скорректированные отступы */ шрифт: 500 20px/1 «Open Sans»; дисплей: гибкий; выровнять-элементы: по центру; } .целевая сумма { дисплей: блок; плавать: вправо; начертание шрифта: жирный; высота: 5 пикселей; } @media только экран и (максимальная ширина: 540 пикселей) { .goal-amount {выравнивание текста: вправо; } .raising-info { ширина: 10%; выравнивание текста: по левому краю; } } .progress-bar-wrap { положение: относительное; ширина: 100%; высота: 22 пикселей; радиус границы: 6 пикселей; фон: #dee0e0; переполнение: скрыто; box-shadow: 0 2px 3px rgba(0, 0, 0, 0,5) вставка; } .update-текст { позиция: абсолютная; внизу: 0; правильно: 0; размер шрифта: 10 пикселей; отступ: 5 пикселей; семейство шрифтов: «Open Sans»; /* Применить семейство шрифтов Open Sans */ } .raising-info { ширина: 100%; высота: 5 пикселей; заполнение: 0; /* Удалены отступы */ плыть налево; } .raising-amount, .raising-label { дисплей: блок; размер шрифта: 20 пикселей; плыть налево; поле справа: 10 пикселей; } .raising-amount { шрифт-вес: жирный; } .goal-words { размер шрифта: 20 пикселей; поле справа: 10 пикселей; высота: 5 пикселей; } ПОДНИМАН 5000 ₹ ЦЕЛЬ 50 000 ₹ Это число обновляется каждые 24 часа функция updateProgressBar(raisingAmount) { константная цельAmount = 50000; константный процент = (поднятая сумма / сумма цели) * 100; const ProgressBar = document.querySelector(".progress-bar"); ProgressBar.style.width = процент + «%»; const поднятыйAmountElement = document.querySelector(".raising-amount"); поднятыйAmountElement.textContent = "₹" + поднятыйAmount.toLocaleString("en-IN"); } константная начальная сумма = 7698; updateProgressBar (initialRaizedAmount); Я пробовал поработать с отступами и высотой контейнера, но понятия не имею, как это исправить. Помощь приветствуется.
Мобильная версия