Сьезжает моб верстка при открытии на айфонах

Question

Есть одностраничник, сьезжает верстка именно при открытии на айфонах(через дев тулз всё ок), на любых браузерах. В чем может быть причина? Один блок просто идет под другой

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body, .content, .success, .ask {
    display: flex;
    flex-flow: column nowrap;
}

#header {
    height: 100px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
    position: absolute;
}

#header img {
    width: 30%;
}

.success {
    color: black;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: url(https://severenity.com/rujjje/img/Bg.jpg);
    background-position: center;
}

.success .title {
    font-size: 55px;
}

.success .description {
    font-size: 18px;
}

.success .description .yellow{
    color: #f1c40f;
}

.success .submit {
    width: 220px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f1c40f;
    text-decoration: none;
    color: #3d3d3d;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    position: absolute;
    margin-top: 200px;
}

.submit:hover {
    background: #fff200;
    border-bottom: 2px solid #7f8c8d;
    cursor: pointer;
}

.ask {
    padding-top: 50px;
}

.askTitle {
    font-size: 23px;
    color: #3d3d3d;
    text-align: center;
}

.questions {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
.question {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    min-height: 120px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding: 30px;
    margin: 20px;
}

.question .questTitle, .questionDescription{
    text-align: center;
}

.question .num{
    width: 40px;
    height: 40px;
    color: black;
    background: #34495e;
    border: none;
    border-radius: 2px;
    position: absolute;
    margin-left: -110px;
}


@media only screen and (min-device-width: 290px) and (max-device-width: 500px) {
    #header {
        flex-flow: column nowrap;
        padding: 10px;
    }

    .headerTitle {
        margin: 7px;
        font-size: 1em;
    }

    #header img {
        width:55%;
    }

    .content .success {
        padding: 15px;
    }

    .content .success .title{
        font-size: 35px;
    }

    .content .success .description{
        font-size: 15px;
    }

    .success .submit {
        width: 190px;
        height: 55px;
        margin-top: 213px;
    }

    .askTitle {
        margin: 0;
    }

    .questions {
        flex-flow: column nowrap;
        padding: 15px;
    }

    .questions1, .questions2 {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .questions .num {
        margin-left: -154px;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>Document</title>
    
</head>

<body>
    <section id="header">
        <img src="https://severenity.com/rujjje/img/logo.png" alt="logo">
        <h3 class="headerTitle">Lorem ipsum dolor, sit amet consectetur</h3>
        
    </section>
    <div class="content">
        <div class="success">
            <h1 class="title">Lorem, ipsum dolor.</h1>
            <p class="description">Lorem ipsum dolor sit.<span class="yellow">Lorem, ipsum dolor.</span></p>
            <p class="description">Lorem ipsum dolor sit amet.</p>
            <p id="timer"></p>
            <a href="#" type="submit" class="submit">Lorem</a>
        </div>
        <div class="ask">
            <h1 class="askTitle">Lorem, ipsum.</h1>
            <div class="questions">
                <ul class="questions1">
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">1</button>
                    </li>
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">2</button>
                    </li>
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">3</button>
                    </li>
                </ul>
                <ul class="questions2">
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">4</button>
                    </li>
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">5</button>
                    </li>
                    <li class="question">
                        <h4 class="questTitle">Lorem ipsum dolor sit amet.</h4>
                        <p class="questionDescription">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <button disabled class="num">6</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    
</body>

</html>

Поехавшая верстка выглядит вот так:

Answer 1

Возможно трабла в том, что у тебя у .success указан min-height и flex одновременно. Попробуй завернуть .success в обертку и ей задай min-height, а у самого .success удали.

БЛОГ НА HUSL

Сьезжает моб верстка при открытии на айфонах

Ответы (1 шт):