0

//CSS

footer {
    position: relative;
    height: 300px;
   width: 100%;
  }
p.copyright {
    position: absolute;
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}

//HTML

<footer>
  <p class="copyright">&copy Copyright 2022</p>
</footer>

My issue is the copyright logo is making my single page into more length, i presume due to the height of the footer - however whenever i reduce this its throwing the copyright into the middle of the page with a section blank underneath. How do i get my copyright to stay on the bottom middle no matter the page size?

  • 1
    Did you try setting absolute position? The problem with the footer is that (I believe) it takes the page size, whatever it is and hence if the page is, say, half screen, the footer will show just below the middle of the screen. – FDavidov Feb 22 '22 at 17:20
  • Tried this, on single pages it just shifts the copyright to just below the text or over it if the page is more than single length –  Feb 22 '22 at 17:29

2 Answers2

0

remove the position relative and absolute

footer {
    height: 300px;
   width: 100%;
  }
p.copyright {
    width: 100%;
   line-height: 10px;
   text-align: center;
    bottom:0;
}
daniel asakpa
  • 59
  • 5
  • When i remove the positions, the copyright just goes to the top of the footer with a gap between the footer and copyright –  Feb 22 '22 at 17:27
0

Display flex to center, remove height add another div which will position paragraph on bottom

CSS:

    footer {
      display: flex;
      justify-content: center;
      margin-top: auto;
    }
    p.copyright {
      margin: 10px;
    }
    body{
      min-height: 100vh; 
      display: flex; 
      flex-direction: column;
      margin: 0;
    }

As for html side

  <footer>
    <p class="copyright">&copy Copyright 2022</p>
  </footer>

Updated

Antonio
  • 26
  • 5
  • Thanks for this, However, was not a success - Worked on most pages except a contacts form page - was displaying the copyright within the form –  Feb 22 '22 at 17:47
  • I have updated my answer, try doing something like this, I'm unsure if this will mess with other stuff on your pages tho. – Antonio Feb 22 '22 at 17:55
  • 1
    Played around with this and switched a few things round, fixed the copyright showing over the form but now it displays half way up my smaller pages with little content - I will get there in the end - appreciate your help –  Feb 22 '22 at 18:03