Footer Issues CSS

Question

I am currently making my first website and I am having problems with my footer. I am using a fixed footer but once I start to scale down to mobile the footer goes over the content. Is there any suggestions on how I can fix this. Here is my Code:

this is my mark-up:

footer {
  clear: both;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(48, 57, 148, 0.8);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<footer>
  <div class="socialmedia">
    <a href="https://www.linkedin.com/in/andrea-de-roeck-b6b47164/"><span class="hidden">Linkedin</span><span class="fab fa-linkedin" aria-hidden="true"></span></a>
    <a href="https://www.instagram.com/dreaderoeck/"><span class="hidden">Instagram</span><span class="fab fa-instagram" aria-hidden="true"></span></a>
    <a href="mailto:deroeck.andrea@gmail.com"><span class="hidden">Email</span><span class="fas fa-envelope-square" aria-hidden="true"></span></a>
  </div>
</footer>

Any suggestions would be greatly appreciated thank you :)

Can you elaborate on what you are trying to achieve here? A fixed element is supposed to be above the other content as it remains in the viewport at the stated position [like fixed/sticky headers] Like this site here has a fixed header https://www.walk-infootclinic.co.uk/ Well atleast thats the standard use for position:fixed anyways. — Moose, Aug 24 '18 at 08:49
Yes, of course, sorry I basically want the footer to be at the bottom of the page at all times and not go over the content. So when its scaling to mobile it doesn't go over any of my links or content. Would you have any suggestions on to achieve this :) — webDesigner, Aug 24 '18 at 09:01
Possible duplicate of [How to make a sticky footer using CSS?](https://stackoverflow.com/questions/29069498/how-to-make-a-sticky-footer-using-css) — aloisdg, Aug 24 '18 at 09:02
So you do not want it to be always stuck to the bottom of the _**screen**_, you just want the footer to be at the bottom of the webpage? [So not like the header is on that link i gave you] — Moose, Aug 24 '18 at 09:04

score 0 · Accepted Answer · answered Aug 24 '18 at 09:03

You can apply css @media

//480 is the window max-width you will apply the new css.
    @media only screen and (max-width: 480px) {
        footer {
          position: relative;
          bottom: 0;
        }
    }

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

score 0 · Answer 2 · answered Aug 24 '18 at 09:10

0

Give a min padding bottom body equal to the height of the footer.

body {
   padding-bottom: 50px;
}

answered Aug 24 '18 at 09:10

Rakesh

216
1
4

Footer Issues CSS

2 Answers2