0

I'm almost done with my website but I have one little problem.

I have have a fixed header and fixed footer on my site with a responsive layout.

All works just like I want it, except when i "tilt" my phone to "landscape" mode. Then the site creates a "padding/margin" at the bottom and the footer gets "forced" up with the content creating a grey border at the bottom. The footer follows the content.

But here's the thing. It works fine on my other pages that have more content (for scrolling) but not on my index page that only have some contact info.

When I add more text to the index page it becomes normal.

Anyone know what I'm doing wrong and can help?

I assume there is a easy fix for this but I can't seem to find it.

<title>Name</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="stylesheet" href="style/structure.css">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />


<?php include("style/header.php"); ?>

<div class="container">

        <div class="content">

        <h1>
            Name
            <br>
            Tlf: Tlf
            <br>
            E-post: <a href="#">mail</a>
        </h1>               

        </div>  <!-- END CONTENT -->

</div> <!-- END CONTAINER -->

<?php include("style/footer.php"); ?>


* {
margin: 0px;
padding: 0px;
}

body {
margin: 0 auto;
width: 90%;
clear: both;
background-color: #FFFFFF;
color: #444444;
font-size: 87.5%; /* 14px */
font-family: times, 'timesnewroman', 'times new roman', 'bakersville', serif;
line-height: 1.5;
-webkit-font-smoothing: 'antialiased';
position: relative;
display: block;
}

header {
height: 40px;
width: 90%;
position: fixed;
z-index: 1;
border-bottom: 1px solid rgba(136, 136, 136, 0.4);
background-color: #FFFFFF;
top: 0;
display: block;
}

footer {
width: 90%;
height: 35px;
float: left;
border-top: 1px solid rgba(136, 136, 136, 0.4);
text-align: center;
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 5px;
display: block;
}

.container {
max-width: auto;
min-height: auto;
float: none;
display: block;
text-align: center;
}

.content {
background-color: #ffffff;
color: #999999;
margin: 0 auto;
display: block;
padding-top: 40px;
padding-bottom: 40px;
}

.content h1 {
color: #000000;
float: left;
font-size: 13px;
line-height: 1.3;
font-weight: normal;
font-family: helvetica;
text-align: left;
}
user3438106
  • 13
  • 4

1 Answers1

1

If you get the grey area in your site on safari (iOS7) it might just be your viewport. Adding to the viewport meta: (height="device-height") will probably solve you problem.

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • I'm using responsive. I got it fully responsive without @media. – user3438106 Mar 19 '14 at 15:44
  • But you are dealing with "media" generally what you have right now is screen-size responsiveness. Not media-responsiveness. For example. If you had to fit 4 boxes across a desktop, you'll be fine with 25% each. But in mobile,. 25% is way to small. So a media specificity will help you change it to 100% each or maybe 50% so that you get only two across or one only. – LOTUSMS Mar 19 '14 at 16:14
  • In this case, you are telling the footer to behave a certain way based on a screen size not the media specific view. (assuming, because you provided no code, must likely the reason someone down-voted you) ;) – LOTUSMS Mar 19 '14 at 16:15
  • :) I'll take a look at it, but may I suggest something? If you want to succeed here you have to make things a little easier for everyone. edit your question so that you can actually use code and if possible put a working snippet in a jsfiddle.net and post it here so that we can take it from there. – LOTUSMS Mar 19 '14 at 16:53
  • So sorry about that! New to this forum. I've adde the main codes now. Header and footer has the same code. And .content h1 is the info on the page. The rest of my code is just the nav bare so basically those codes are the foundation of the site. – user3438106 Mar 19 '14 at 17:06
  • Added the footer as well, so there is no mixups. – user3438106 Mar 19 '14 at 17:13
  • I haven't forgot about you. In a meeting. Will take care of it soon – LOTUSMS Mar 19 '14 at 18:54
  • I found the answer. Even with a down-vote ;) Thanks for the help and positive attitude. Posting the answer here for the future people with the same problem. – user3438106 Mar 19 '14 at 19:08
  • It seems I can't answer my own question within 8 hours (because of n00b) so I'll post it here and if you post it for me, I will give you all the up-votes I can and mark it as answer fixed my problem;) Where is the answer: If you get the grey area in your site on safari (iOS7) it might just be your viewport. Adding to the viewport meta: (height="device-height") will probably solve you problem. – user3438106 Mar 19 '14 at 19:14
  • No problem. I'm glad it worked for you. Sorry I couldn't get to it on time. But the important part is that you found the answer on your own. That's even better. And I agree other people deserve to know the answer. I'll post it for you by editing my own answer – LOTUSMS Mar 19 '14 at 19:20