html - 如何更改进度条的位置？ (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 代码(我希望相关，我是初学者)如下所示。 header :

<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。