Search code examples
htmlcssiphoneviewport-units

Iphone Text Position Issues

Hello apologies for what may come across as a silly question as I am still fairly new to HTML & CSS. I want to avoid using Javascript if possible to solve this solution.

My issue is the text "Still working on it". On the various laptops / desktop screens and android phones tested I've had no issue with it the entire text field being centered. However on iphones I am assuming that it centers the first letter of the string "S"? Below is an example of what it looks like on iphone devices:

http://imgur.com/w3OEXyW

Below is my HTML and CSS code respectively, if anyone could guide me in the right direction to sorting this issue I would very much appreciate it. 

<!DOCTYPE html>
<html>
<head>
    <title>Elias Malik</title>
    <link rel="stylesheet" href="main.css">
    <link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <link rel="shortcut icon" href="diamond.ico">
</head>

    <body>
        <div class="bc">
            <h1>Still working on it</h1>
        </div>

<footer class="mainFooter">
        <div class="socialmediaFooter">
            <a href="https://www.facebook.com/elias.malik.7"><img class="focus" src="facebook.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://instagram.com/eliasrmalik"><img class="focus" src="instagram.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://uk.linkedin.com/in/eliasrmalik"><img class="focus" src="linkedin.png"</img></a> 
        </div>
    </footer>

    </body>
</html>

and 

html 
{

background: url("devbc.jpg") no-repeat center center;

min-height:100%;
background-size:cover;
}


body
{

    text-align: center;
min-height:100%;

}

.bc h1
{

    text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax; 
position: fixed; 
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
    white-space: nowrap;
}


.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}

img
{

max-height: 10vmax;
max-width: 5vmax;

}

The website is: https://eliasmalik.com

Solution

  • I'm not sure if it will fix it on your phone, but try to take out the left:51% and your transform property on your .bc h1 css and instead add a width:100%