title: What causes text line break or disappearance when applying position absolute or fixed
body: <p>I'm trying to position my footer responsively on my homepage but as soon as I apply position fixed or absolute, a line break appears in the text or half of it disappears and the spacing between elements within the footer changes.</p>
  
  <p>What's causing this?</p>
  
  <pre><code>&lt;div class="footer- callout"&gt;
  &lt;/div&gt;
  &lt;footer id="colophon" class="site- footer footer bg-dark" role="contentinfo"&gt;
      &lt;div class="container footer-inner"&gt;
        &lt;div class="row"&gt;. 
           &lt;div class="footer-widget-area"&gt;
              &lt;div class="col-md-3 col-sm-6 footer-widget" role="complementary"&gt;
                 &lt;div id="text-60" class="widget widget_text"&gt;
                   &lt;div class="textwidget"&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- .widget-area .first --&gt;
              &lt;div class="col-md-3 col-sm-6 footer-widget" role="complementary"&gt; 
                &lt;div id="text-42" class="widget widget_text"&gt;
                   &lt;div class="textwidget"&gt;
                      &lt;div class="copyright"&gt;© 2020 4309.co.uk
                      &lt;/div&gt;
                   &lt;p&gt;&lt;a  href="https://4309.co.uk/contact"&gt;&lt;i class="fa fa-long arrow-right"&gt;&lt;/i&gt;.&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>@media(max-width: 768px) {.page-id-28 #colophon {position: absolute; top: 400px;}} 
  </code></pre>
  
  <p>Mobile page <a href="https://4309.co.uk" rel="nofollow noreferrer">here</a> </p>