如何更改进度条的位置？ （CSS）

Question

在我公司，我们使用提供了一些布局模板的调查软件/平台。该平台允许CSS修改，我想在其上方的标题图像上放置一个进度条。 It looks like this right now.

当前用于这些元素的CSS代码是：

/ **标题图片* /

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

---

/ **进度栏* /

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，但仅将其应用于尺寸至少为1100px的屏幕上。因此不在手机上。