match the design to iphone4 & iphone 5 - css

Question

I have problem to match the buttons to iphone 4 and iphone 5 only.
all the other platform design phones looks good and responsive but only iphone 4 & 5 little strange.
as you can see in nexus, galaxy and iphone 6 it looks good
but in iphone 4 i need to scroll down and the forgot password and create account is one on the other.
<div class="popup popup-login modal-{{popupLogin}}" style="display: block;background:transparent">
<div class="content-block" >
<div class="login-view-box page page-login-wrapper" style="background:transparent;background:#009688">
<div class="text-center" >
<div class="logo sd" ></div>
<div class="company-text">company name</div>
</div>
<div class="list login-form-box">
<form name="loginForm"
novalidate ="novalidate"
ng-submit="loginForm.$valid && performLogin()" style="margin:20px auto;">
<label class="item item-input" >
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
fill="#000000"></path>
</svg>
<input type="email" placeholder="Email" name="email" ng-model="email" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
<div ng-message="email">{{ClientMessages.InvalidEmailInput}}</div>
</div>
<br />
<label class="item item-input">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path d="M14.5 8h-0.5v-1.5c0-2.481-2.019-4.5-4.5-4.5s-4.5 2.019-4.5 4.5v1.5h-0.5c-0.827 0-1.5 0.673-1.5 1.5v8c0 0.827 0.673 1.5 1.5 1.5h10c0.827 0 1.5-0.673 1.5-1.5v-8c0-0.827-0.673-1.5-1.5-1.5zM6 6.5c0-1.93 1.57-3.5 3.5-3.5s3.5 1.57 3.5 3.5v1.5h-7v-1.5zM15 17.5c0 0.276-0.224 0.5-0.5 0.5h-10c-0.276 0-0.5-0.224-0.5-0.5v-8c0-0.276 0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5v8z"
fill="#000000"></path>
</svg>
<input type="password" placeholder="Password" name="password" ng-model="password" ng-class="{submitted:submitted}" required/>
</label>
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$touched || submitted" class="input-error-small item item-input">
<div ng-message="required">{{ClientMessages.ThisFieldCannotBeEmpty}}</div>
</div>
<button type="submit"
class="button button-block button-positive"
id="login-button"
ng-click="loginSubmit()"
<i class="icon ion-loading-c"></i>
<span>Sign In</span>
</button>
<div class="item item-input list-block" style="background-color:transparent;border:0;margin-top:8px;" ng-click="toggleStayLoggedCheck();" >
<label class="label-checkbox">
<input type="checkbox" name="stayLoggedCheckbox" ng-model="stayLoggedCheckbox" value="StayLogged" >
<div class="item-media" style="padding-left:20%">
<i class="icon icon-form-checkbox" style="border-radius:0"></i>
<span style="padding-left:10px;color:white">Stay Logged In</span>
</div>
</label>
</div>
</form>
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>
</div>
</div>
</div>
the problem area
<button class="button btn-account">
Create an account
</button>
</div>
<!-- Big Button -->
<div class="footer-link text-center" style="margin-top:20px;">
<div class="text-center" style:"margin-top:20px;">
<a href="#" class="open-popup" data-popup=".popup-forgotpassword" style="color:white;">
Forgot Password?!
</a>
</div>
<!-- <a href="#" class="open-popup" data-popup=".popup-register" >
I don't have a APP account.
</a>-->
</div>
<div class="text-center crt"
style="position: absolute;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o SAMGray-color" style="font-size:20px;top:8px;position:relative;"></span>
</div>

Answer 1

Has your class .footer-link a position: absolute and bottom: 0 properties or something ?
I'd suggest to create a media query like below, to target iphones 4 & 5.
#media only screen and (max-width: 320px) {
/* your iphone 4 & 5 styles */
}
Then, switch your .footer-link class to position: relative (and maybe float: left, depending on your other blocks' float).
The final code should looks like this:
#media only screen and (max-width: 320px) {
.footer-link {
position: relative;
/* float: left; if needed */
}
}
This should position the "forgot password" and fab below the "create account" button and in the meantime apply that margin-top: 20px which is useless in absolute positionning.
Your view will have to be scrolled to see the "forgot password" link though. So you might want to add more styles to the media query in order to reduce some margins, paddings or font-sizes and get the desired view as a result.
However, in this layout your fab link will be messed up. As its absolute positionning would be relative to the .footer-link. I suggest you move it outside of the footer (right before the </body> tag, for example).
Hope this helps!

Answer 2

I'd try switching the position properties. When positioning something absolute, the parent should be "position:relative". When you were resizing in Chrome's mobile spoofer, it was pushing that absolute positioned item up and into the other content. It isn't mimicking any other specs when you're spoofing the view, just the view dimensions. Hope this helps!
<div class="text-center crt" style="position: relative;
background: #4bd46b;
border-radius: 20px;
height: 40px;
width: 40px;
bottom:10px;
right:10px;
font-size: 18px;">
<span class="fa fa-envelope-o df-color" style="font-size:20px;top:8px;position: absolute;"></span>
</div>