Reputation: 3

Why are some css elements not working on iphones?

I have an issue with some css elements that are breaking on iphone browsers (safari & chrome) when it's working totally fine on desktop and android devices.

I've attached 2 images of the sign in screens as one of the examples, the code for this screen is as follows:

@font-face {
    font-family: 'Gidole Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gidole Regular'), url('../fonts/Gidole-Regular.woff') format('woff');
    }

body {
    max-width: 1920px;
    max-height: 1920px;
    background: #eee;
}



.Title {
    margin-left: 20px;
    margin-right: 20px;
    font-family: industry-inc-3d, sans-serif;
    height: 128px;
    font-weight: normal;
    font-size: 45px;
    line-height: 60px;
    text-align: center;
    color: #f05d5b;
}

.flashed-messages
{
    font-family: industry-inc-3d, sans-serif;
    height: 24px;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    color: #f05d5b;
    /* border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    margin-top: 10px; */
}


.form {
    margin: 0 auto;
    display: table;
}

.email-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    position: relative;
}

.email {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.password-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    position: center;

}

.password {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.button-signin {
    margin: 0 auto;
    width: 143px;
    height: 27px;
    font-family: industry-inc-3d, sans-serif;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    color: #f05d5b;
    width: 150px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
}

.button {
    text-align: center;
}

.signup-text{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup-link{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup {
    margin-top: 30px;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sign in</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/sign_in.css') }}">
    <link rel="stylesheet" href="../static/css/sign_in.css">
    <!-- <link rel="stylesheet" type="text/css" href="precious.css"> -->
    <link rel="stylesheet" href="https://use.typekit.net/oaq5uou.css">
    <style>
        @import url("https://use.typekit.net/oaq5uou.css");
      </style>
</head>
<body>

    <h1 class="Title">Welcome To Precious</h1>
    <div class="flashed-messages">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>
    <div class="form">
        <form class="form-signin" method="POST">
            <div>
                <div><label class="email" for="email">Email</label></div>
                <div><input class="email-box" type="email" name="email"></div>
            </div>
                <br>
            <div>
                <div><label class="password" for="password">Password</label></div>
                <div><input class="password-box" type="password" name="password"></div>
            </div>
                <br>
            <div class="button">
                <input type="submit" name="submit" value="Sign In" class="button-signin" >
            </div>
        </form>

       

        <div class="signup">
            <a class="signup-text">No account? </a>
            <a href="/sign_up" class="signup-link">sign up</a>
        </div>
    </div>

</body>
</html>

Dektop or adroid browser

Iphone browser

Anyone has an idea why that could be happening?

Upvotes: 0

Answers (3)

Jason Vasilev

Reputation: 310

Welcome to SO, Maher.

Try removing the height properties on on Title and flashed-messages. On Small screens the copy will break on multiple lines but the height is still the same. In this case the text will overlap with the content from bellow. You might experience this only on iPhone if the particular device you use has smaller screen width than the Android you use.

Upvotes: 0

Volvox

Reputation: 1649

Some browsers add their own styling for form elements. You need to remove it by using:

.thing {
   -webkit-appearance: value;
   -moz-appearance:    value;
   appearance:         value;
}

https://css-tricks.com/almanac/properties/a/appearance/

Upvotes: 0

Ilijanovic

Reputation: 14904

I guess you need prefixer.

Here is a good website:

https://autoprefixer.github.io/

Copy / Paste your code into the formatter and copy the formatted CSS code.

Try this CSS code:

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@font-face {
    font-family: 'Gidole Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Gidole Regular'), url('../fonts/Gidole-Regular.woff') format('woff');
    }

body {
    max-width: 1920px;
    max-height: 1920px;
    background: #eee;
}



.Title {
    margin-left: 20px;
    margin-right: 20px;
    font-family: industry-inc-3d, sans-serif;
    height: 128px;
    font-weight: normal;
    font-size: 45px;
    line-height: 60px;
    text-align: center;
    color: #f05d5b;
}

.flashed-messages
{
    font-family: industry-inc-3d, sans-serif;
    height: 24px;
    font-weight: normal;
    font-size: 15px;
    text-align: center;
    color: #f05d5b;
    /* border: 1.5px solid #f05d5b;
    box-shadow: 4px 4px 0px #f05d5b;
    margin-top: 10px; */
}


.form {
    margin: 0 auto;
    display: table;
}

.email-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
    position: relative;
}

.email {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.password-box {
    width: 300px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
    position: center;

}

.password {
    width: 299px;
    height: 24px;
    font-family: industry-inc-base, sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
    color: #707070;
}

.button-signin {
    margin: 0 auto;
    width: 143px;
    height: 27px;
    font-family: industry-inc-3d, sans-serif;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    color: #f05d5b;
    width: 150px;
    height: 50px;
    background: #f6f7f7;
    border: 1.5px solid #f05d5b;
    -webkit-box-shadow: 4px 4px 0px #f05d5b;
            box-shadow: 4px 4px 0px #f05d5b;
}

.button {
    text-align: center;
}

.signup-text{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup-link{
    font-family: "Gidole Regular";
    width: 218px;
    height: 18px;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    color: #707070;
    opacity: 0.5;
    text-align: center;
    position: relative;

}

.signup {
    margin-top: 30px;
    text-align: center;
}

Upvotes: 1

Why are some css elements not working on iphones?

Answers (3)

Related Questions