Как изменить положение индикатора выполнения? (CSS)

Question

В моей компании мы используем программное обеспечение / платформу для опросов, которая предлагает несколько шаблонов макетов. Платформа допускает модификации CSS, и я хочу расположить индикатор прогресса на изображении заголовка над ним. Сейчас это выглядит так.

Коды CSS, используемые в настоящее время для этих элементов:

/ ** Изображение заголовка * /

div.questionnaire-header {
background: url("/images/uploaded/UMUQJ98W9N1N");
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
}

---

/ ** Progress-bar * /

html .progress-area .progress-bar {
background-color: #666666;
background-image: none;
}

Я пытался использовать следующее:

html .progress-area {
  top: 220px;
}

Однако,это создает проблему для мобильных устройств;это заставляет индикатор выполнения «показывать» содержимое ниже.

HTML-код (который, я надеюсь, уместен, я новичок) выглядит следующим образом. Заголовок:

<DIV class='questionnaire-header'>
</DIV>

А для индикатора выполнения:

<div class="progress-area progress0"><div class="progress-bar progress-bar-graphical"><div class="progress-completed" style="width: 9%"></div><div class="progress-textual-area"><div class="progress-textual">9%</div></div></div></div>

Answer 1

Если этот CSS создает проблему на мобильном устройстве, измените этот CSS, чтобы он не применялся на мобильном устройстве. Используйте это вместо:

@media (min-width: 1100px) {
html .progress-area {
  top: 220px;
}}

Этот код выше будет использовать ваш последний предоставленный CSS, но применять его только на экранах размером не менее 1100 пикселей. Поэтому не для мобильных устройств.

И если вам нужен код, который будет применяться только на мобильных устройствах на экранах с разрешением менее 1100 пикселей, измените значение min-width на max-width.