如何更改进度条的位置？ （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的屏幕上。因此不在移动设备上。

如果您希望代码仅适用于1100像素以下的屏幕上的移动设备，请将min-width的值更改为max-width。