Getting footer to display right on mobile browsers

[thernztrom]

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! :)

[Atelierbram]

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:

• losing some of those nested divs
• putting the .clear class on the outer element
• clearing the floated elements, something like this: #footer .inner { overflow: auto; padding: 2em 1em; }
• making all the links have one display value like #footer a { display: block; }
• removing the 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 -->

[Author]

Posts