使 header 框响应

Question

我使用下面的代码在 header 标题周围添加了一个框，但是有什么方法可以使它响应以适应 header 文本吗？目前所有的盒子都是设置好的尺寸，当缩小到移动设备时会消失在屏幕上，提前感谢您的帮助

.box.active .header-title p {
    width: 600px;
    height: 120px;
    padding: 15px;
    border: 0px solid white;
    padding-bottom: 15px;
    background: rgba(80, 80, 80, 0.4);
    opacity: 1;
  color: white

}

Answer 1

为什么不在文本周围加上边框？无需绑定具有固定高度和宽度的文本。这不会使文本响应。试试这个代码。

.box.active .header-title p {
    padding: 15px;
    border: 1px solid #000;
}

删除多余的 css.

Answer 2

width: 600px;

给您带来麻烦。这是固定的 600px，移动屏幕可以说是 375px

使 header 框响应

Making a header box responsive

css

wordpress

header

title