Website Funny On Mobile Devices [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
So I was having a look at my website on my mobile device and there are a few errors I haven't been able to fix. The first is the footer of my site.
http://www.webbmaster.com.au/web-programs/questdesign/
As you can see my footer looks distorted. Any ideas on how to fix it for mobile. This is my css code for the footer.
.footer {
background-color: #F6861F;
color: #fff;
padding: 20px 0;
text-align: center;
overflow: hidden;
width: 100%;
}
Also the other problem is the large amount of white space down the bottom of the page. How would I go about removing that?
Many thanks to whoever can help me sort this problem out.

Answer 1

It's because you're setting width by pixels. You cannot expect your website to be responsive if you specify height,width by pixels.
.body .container{
width:80%;
}
.navigation .nav-pills{
width:80%;
height:20%;
}
That should make your website look more acceptable in mobile view.
EDIT:
Add this to your css file.
#media screen and (max-width:767px){
.body .container{ width:80%; height:100%;}
.navigation .nav-pills{height:55px;width:100%;}
.nav > li{float:left;}
.nav-pills > li a{margin: 10px 10px;}
.sliderr{height:340px;}
.footer{margin-top:10%;}
}
Try it and let me know if you are happy with it. Also I don't think float left is needed. It's just a habit of mine :X

Answer 2

this worked out for me, had to go over my entire css a bit and edit, but seemed to work very nicely :)
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:1em;
background:#5ee;
}
#content {
padding:1em;
padding-bottom:5em; /* Height of the footer element */
}
#footer {
width:100%;
height:5em;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
This works for mobile and webpage, to keep the footer down there.
Doesn't have to be in px, I use em's :) Changed it to em's, this I find better for wwebpage setup :)
Tou can then have other items in absolute position to, just have to be relative to wour Wrapper, the part wich is your entire webpage :)
The body in min-height 100% wont do it, as the body adjust's to the content in the page, and therefore, if less text, it will not stretch out!
Hope ithis helps you as much as it did me :)