[HTML/CSS] Footer issues!

[Magic]

Hello!

So my portfolio is coming along great but I have this one extremely frustrating issue. My footer is perfect and looking sexy here:

It is at the bottom and fixed so it stays there
How ever if the browser height becomes narrow enough and the text touches it, the text goes straight trough the div and than my scroll wheel will not scroll down far enough to see it all. I would like the text simply to stay above it or that my scroll wheel can "scroll" it out of there.

The code of the footer is here, please let me know if you require other code.

.footer {
width: 100%;
height: 7%; /*4em;*/
background: #181818;
text-align: center;
opacity: 0.8;
display: table;
position: fixed;
bottom: 0;
}

 

[Sysode]

Change footer to display:block; instead of table and add a margin-top.

 

[Magic]

Change footer to display:block; instead of table and add a margin-top.

All that does is un-center the text in the footer, it does nothing to the actual content.
My footer text has a span and has a display of table cell which centers it.

 

[Sysode]

All that does is un-center the text in the footer, it does nothing to the actual content.
My footer text has a span and has a display of table cell which centers it.

Why not just add: text-align center; and then use a div to style your footer text. The span element carries a display:inline; by default.

In that case, add some margin-bottom to your last element before your footer.

 

[Magic]

Why not just add: text-align center; and then use a div to style your footer text. The span element carries a display:inline; by default.

In that case, add some margin-bottom to your last element before your footer.

I had it like that since that also aligned it vertically, how ever I removed that and did what you said and it works now I set the margin-bottom to the height of the footer on the content and now I can scroll the content out of the footer.

Thanks man <3 <3 <3