title: Top message box in CSS
body: <p>I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.</p>
  <p>Here's the image for the regular 1366x768 computer screen:
  <a href="https://i.stack.imgur.com/YOP6J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YOP6J.png" alt="enter image description here" /></a></p>
  <p>And here is for a typical mobile device:</p>
  <p><a href="https://i.stack.imgur.com/XVs68.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XVs68.png" alt="enter image description here" /></a></p>
  <h1>Problems:</h1>
  <ol>
  <li>The X button has tagled with the message.</li>
  <li>The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.</li>
  </ol>
  <p>How to fix the two above problems? Do I have to follow another path?  I use <code>position: fixed;</code> property-value to keep my message on top.</p>
  <p>Here are my HTMl and CSS code:</p>
  <p>HTML:</p>
  <pre><code>    &lt;div class=&quot;top-msg&quot;&gt;
          &lt;div class=&quot;top-msg-ico&quot;&gt;
              !
          &lt;/div&gt;
          &lt;div class=&quot;top-msg-inner&quot;&gt;
              &lt;p&gt;Only letters and nubers are allowed for email. See &lt;a href=&quot;#&quot;&gt;security&lt;/a&gt; for more info.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;top-msg-close&quot; style=&quot;  cursor: pointer;&quot;&gt;&amp;#10005;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.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: &quot;Lato&quot;, 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;
  }
  </code></pre>
  <p>FIDDLE:
  <a href="https://jsfiddle.net/4oLvyajo/" rel="nofollow noreferrer">https://jsfiddle.net/4oLvyajo/</a></p>
  <h1>UPDATE -SOLUTION!-</h1>
  <p>After some help from <a href="https://stackoverflow.com/questions/35391782/top-message-box-in-css/35392072#35392072">LGSon</a> answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.</p>
  <p>FIDDLE:
  <a href="https://jsfiddle.net/4oLvyajo/4/" rel="nofollow noreferrer">https://jsfiddle.net/4oLvyajo/4/</a></p>
  <p>Images:</p>
  <p><a href="https://i.stack.imgur.com/yYkrh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yYkrh.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/DcogR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DcogR.png" alt="enter image description here" /></a></p>