0

I built an HTML/CSS footer for a site. But when I resize the screen, the footer doesn't resize and I can only see a clipped footer. I'd like the footer div to resize so I can see all the text at any time. Any help would be appreciated.

/* Footer Style */
#footer-background {
	position: fixed;
	height: 30px;
	left: 0%;
	bottom: 0%;
	z-index: 50;
	width: 100%;
	background: #000000;
	opacity: 0.80;
}
#footer-box{
	width: 95%;
	margin: auto;
	padding: 0 10px;
}
#footer-box h2{
	margin-top: 0;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	font-weight: normal;
	font-family: Arial, sans-serif;
	color: #A9A9A9;
}
#footer-box a{
	text-decoration: none;
	outline: none;
	color: #A9A9A9;
}
#footer-box a:hover{
	text-decoration: underline;
}
<!-- Footer bar -->
<div id="footer-background">
	<div id="footer-box">
		<h2>
		<a href="/abc/">Title 1</a> |
		<a href="/abc/">Title 2</a> |
		<a href="/abc/">Title 3</a> |
		<a href="/abc/">Title 4</a> |
		<a href="/abc/">Title 5</a> |
		<a href="/abc/">Title 6</a> |
		<a href="/abc/">Title 7</a> |
		<a href="/abc/">Title 8</a>
		</h2>			
	</div>
</div>
<!--/ Footer bar -->

3
  • You need to remove the fixed height (height: 30px;). This value won't magically adjust it's self as the text wraps.
    – Turnip
    Commented Sep 19, 2017 at 14:44
  • This seems to be resizing on latest chrome browser. Is this a browser specific issue? Commented Sep 19, 2017 at 14:47
  • @turnip - I modified the height from 30px to 10% and it works. But the height of the footer was too much for me - leaving lot of blank space at bottom. Then I set it to 5% but that doesn't work on resizing. I want the height to be as much as the text height and it adjusts on resizing. Any suggestions? Commented Sep 19, 2017 at 15:07

3 Answers 3

1

I would like to address some points here : (1) "height" property

#footer-background {
    position: fixed;
    height: 30px;
    left: 0%;
    bottom: 0%;
    z-index: 50;
    width: 100%;
    background: #000000;
    opacity: 0.80;
}

In above piece of code you added height:30px; meaning, you are restricting this element to grow if content wrap around. You can use padding: 20px; or whatever size you want so that when you scale down the screen size, content will wrap inside the element. (2) h2 has pre-defined css property

#footer-box h2{
    margin-top: 0;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    color: #A9A9A9;
}

h2 element has predefined margins. instead of just removing margin-top, try to remove margins from all around h2. i.e margin:0; I hope this will help you understanding the point.

1
  • Thanks for answer and the explanation. It works with setting height in % for the div and margin to 0 for the h2. Commented Sep 20, 2017 at 19:49
0

As @turnip pointed out your div has a fixed height, that means that you can't see the rest of the items because they overflow the container.

Try removing height: 30px;. To achieve this height for wide enough screen you simply need to add margin-bottom: 0; for h2 tag.

P.S. Consider using classes instead of ids to style your layout, the have much less specificity and are considered a good practice to use.

P.P.S. Why are you using an h2 for a list of links, how about ul and li?

2
  • I'm a UI novice so this is what I came up with. But I can try out ul and li as next steps and also having the CSS uses classes instead of id's. I mentioned in my top comment about changing height from px to % but that has it's own issues. Any further thoughts? Commented Sep 19, 2017 at 15:09
  • My answer already covers the extra space at the bottom, using percent values will not work altogether.
    – Olga
    Commented Sep 19, 2017 at 15:14
0

Based on suggestions from folks above, I am pasting the answer here for reference to others who would like to see a working solution!

.footer-box{
	position: fixed;
	font-family: Arial, sans-serif;
	color: #FFFFFF;
	background-color: #000000;
	font-size: 11px;
	width: 100%;
	opacity: 0.8;
	z-index: 50;
	bottom: 0px;
	left: 0px;
}
.footer-box h2{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	font-weight: normal;
	font-family: Arial, sans-serif;
	color: #A9A9A9;
}
.footer-box a{
	text-decoration: none;
	outline: none;
	color: #A9A9A9;
}
.footer-box a:hover{
	text-decoration: underline;
}
<div class="footer-box">
	<h2>
	<a href="/weddings/">Weddings</a> |
	<a href="/cityhall/">City Hall</a> |
	<a href="/engagements/">Engagements</a> |
	<a href="/barmitzvah/">Bar Mitzvah,Quinceanera</a> |
	<a href="/birthdays/">Birthdays</a> |
	<a href="/maternity/">Maternity</a> |
	<a href="/portraits/">Portraits</a>
	</h2>			
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.