- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello!
I’m having problems with the footer on my site. The site is: http://www.spelplaneten.net/
On IE 11 and Chrome v33 on my PC, it looks good. It covers the whole width of the screen, and content is centered. However when you go onto the website using Chrome on Android or Safari on iOS the footer is not displayed correctly:
Chrome on Android:
* Footer does not cover the whole width of the screen
* Footer is “floating” above the bottom of the page
Safari on iOS iPad:
* Footer does not cover the whole width of the screen
Here is a picture to demonstrate the problem: https://dl.dropboxusercontent.com/u/23839404/Screenshot_2014-03-16-23-28-11.png
Here is my style css file (footer part is pretty far down): http://www.spelplaneten.net/css/style.css
I’ve been messing around with the css footer properties, but not been able to fix it. Would appreciate if someone could give me an hint! :)
Can’t say what exactly the solution to your problem would be, but I think you can make that footer a bit more sturdy by:
div
s.clear
class on the outer element#footer .inner { overflow: auto; padding: 2em 1em; }
#footer a { display: block; }
width
and height
attributes from the images, have them take up the width of the floated wrapper links #footer a img { max-width: 100%; }
<div id="footer" class="clear">
<!-- <div class="bottom"> -->
<!-- <div class="container"> -->
<div class="inner">
<a class="logo_pmc" href="https://www.facebook.com/spelplanetenMC">
<img alt="Spelplaneten Facebook" src="images/facebook.png">
</a>
<!-- and so on -->