Html CSS中的顶部消息框

我想在我的web应用程序中创建一个消息警报框。我创建了主样式，但我在小屏幕尺寸上有问题

以下是常规1366x768计算机屏幕的图像：

下面是一个典型的移动设备：

问题：

X按钮已标记消息

主消息包装器已修复，当消息从包装器中发出时未展开

如何解决上述两个问题？我必须走另一条路吗？我使用

位置：固定属性值以保持我的邮件在顶部

以下是我的HTMl和CSS代码：

HTML:

小提琴：

更新-解决方案-
在得到答案的一些帮助后，我设法完成了所有的设计，所以我接受了他的答案，但洞的解决方案在下面的小提琴中

小提琴：

图像：


将
宽度：80%
替换为
右边距：40px
，您还必须摆弄
顶部：15px
（在-11时，我让它看起来不错，但您可以摆弄它）


如果你想要所有东西都可伸缩，你需要一个完全不同的方法。首先，如果将右浮动元素放置在块元素下，它将向右浮动，但在块元素下。首先需要定义浮动关闭按钮元素


它需要在填充和边距上做一些小的调整，但我认为这非常接近您想要的
这是一个开始


.top msg{
宽度：100%；
位置：固定；
背景色：rgba（42,45,50,0.6）；
颜色：rgba（250251255,0.95）；
字体系列：“Lato”，无衬线；
字号：18px；
}
.顶部味精关闭{
浮动：左；
框大小：边框框；
填充顶部：17px；
右侧填充：30px；
宽度：45px；
}
.顶部味精内部a{
文字装饰：无；
颜色：RGBA（0,0,0,0.6）；
字体大小：粗体；
}
.top msg内部消息a:悬停{
颜色：RGBA（0,0,0,0.5）；
}
.顶部味精内部{
浮动：左；
框大小：边框框；
填充：0 10px；
宽度：计算（100%-110px）；
}
.top msg ico{
浮动：左；
宽度：65px；
高度：57px；
背景色：#fff；
背景色：rgba（0,0,0,0.7）；
文本对齐：居中；
字体大小：45px；
}

!
电子邮件只允许使用字母和数字。有关更多信息，请参阅

✕    
这可能是因为您在
中的
高度
是固定的。
我知道，但这就是我喜欢的方式。您解决了接近ico的问题，但是扩展呢？有什么办法可以实现吗？我添加了小提琴，它也会扩展。嘿，我刚刚完成了所有的要求。我稍微编辑一下你的代码。我该怎么办？更新你的答案？张贴我自己的答案？是否向您发送完成的代码以更新您的代码？因为我不想接受你的回答，因为还有一些东西需要补充。@geogegkas答案应该是一个指南，或者一个指导，并与之一起添加自己的调整。如果我的答案解决了主要问题，例如，您增加了图标的大小，则应选择/接受我的答案。这有意义吗。。。有些人会在他们选择的答案上添加评论，而且回答者通常会根据更改的程度相应地更新他们的答案。是的，我就是这么做的！：）再次感谢你@和我的回答相比，这是一个很大的变化。现在我想你最好投我的一票（当然如果你愿意的话），删除你的问题编辑并添加它作为自我回答，然后接受它。如果你愿意，只要用我的代码更新你的问题。我不管怎样，任何人都会阅读我的问题，可以从那里找到代码。：）
    <div class="top-msg">
        <div class="top-msg-ico">
            !
        </div>
        <div class="top-msg-inner">
            <p>Only letters and nubers are allowed for email. See <a href="#">security</a> for more info.</p>
        </div>
        <div class="top-msg-close" style="  cursor: pointer;">&#10005;</div>
    </div>

.top-msg {
  width: 100%;
  height: 55px;
  position: fixed;
  background-color: rgba(42,45,50,0.6);
  color: rgba(250,251,255,0.95);
  font-family: "Lato", sans-serif;
  font-size: 18px;


}

.top-msg-close {
  float: right;
  padding-top: 17px;
  padding-right: 30px;
  //border: 1px solid white;
  //height: 100%;
  width: 3%;

}

.top-msg-inner {
  top: 15px;
  position: absolute;
  display: inline-block;
  padding-left: 10px;
  width: 80%;
  //border: 1px solid white;


}

.top-msg-ico {
  min-width: 65px;
  height: 100%;
  background-color: #fff;
  display: inline-block;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  font-size: 45px;
}