Держите содержание центрируется при уменьшении ширины

Я пытаюсь держать мое содержание центрированный, когда мне уменьшить ширину браузера (или использовать мобильное устройство, такое как iPhone.Держите содержание центрируется при уменьшении ширины

Все не центрируется примерно до макс-ширина 560px, в этот момент все, что меньше, чем 560px покрывает правую часть страницы.

у меня есть margin: 0 auto для моих основных групп в теле, и я думал, что всегда сохранить содержимое по центру.

Here is my JSFiddle for compactness

Вот картина того, что страница выглядит как на iPhone 6.

HTML:

<body> 

     <div class="header"> 

      <p><a href="../" class="no-link-style">TWIN CAT AUDIO</a></p> 

     </div> 

     <div class="container"> 

      <p class="center">Sign up for updates!</p> 

      <!--SIGN UP --> 
      <form method="post" name="signup" id="signup" class="center" > 

        <input type="text" name="first-name" id="first-name" placeholder="First name" class="all-input-text" /> 

        <br /> 

        <input type="text" name="last-name" id="last-name" placeholder="Last name" class="all-input-text"/> 

        <br /> 

        <input type="email" name="email" id="email" placeholder="Email address" class="all-input-text" /> 

        <br /> 

        <input type="password" name="password" id="password" class="all-input-text" placeholder="Password" /> 

        <br /> 

        <input type="password" name="pass-confirm" id="pass-confirm" class="all-input-text" placeholder="Confirm password" /> 

        <br /> 

        <input type="submit" name="submit" id="signup-btn" value="SIGN UP" /> 

      </form> 

      <div class="error-message center"></div> 

      <p class="redirect center">Already have an account? <a href="login.php" id="go-to-login">Log in</a> </p> 

     </div> 

      <script src="../Bootstrap/js/bootstrap.min.js"></script>

CSS:

html, body { 
    font-family: "Dosis", "Open Sans", sans-serif; 
    margin: 0 auto; 
    max-width: 100%; 
    max-height: 100%; 
    color: #333; 
} 

.container { 
    margin: 0 auto; 
    max-width: 600px; 
    max-height: 100%; 
    padding: 0 15px 0 15px; 
    border: none; 
} 

.header { 
    color: #4F94CD; 
    padding-bottom: 10px; 
    text-align: center; 
    font-size: 4.5em; 
    width: 100%; 
    height: 100px; 
    background-color: white; 
    margin-bottom: 40px; 
    border-bottom: thin lightGrey solid; 
    display: block; 
    white-space: nowrap; 
} 

.container > p { 
    font-size: 2em; 
    margin-bottom: 20px; 
    color: #4F94CD; 
} 

a.no-link-style:link, a.no-link-style:visited, a.no-link-style:hover { 
    color: #4F94CD; 
    text-decoration: none; 
} 

a.no-link-style:hover{ 
    font-weight: bold; 
} 

.center { 
    text-align: center; 
} 

form { 
    max-width: 800px; 
    margin: 0 auto; 
} 

.all-input-text { 
    margin-bottom: 12px; 
    border: 1px solid #ccc; 
    border-radius: 1px; 
    padding: 3px; 
    font-size: 1.2em; 
    width: 426px; 
    height: 45px; 
    color: #555; 
    font-family: 'Dosis', sans-serif; 
} 

/*Removes the yellow background color when Chrome autofills*/ 
input:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
    -webkit-text-fill-color: #777; 
} 

input::-webkit-input-placeholder { 
    color: #bbb; 
} 

input:-moz-placeholder { 
    color: #777; 
} 

input::-moz-placeholder { 
    color: #777; 
} 

input:-ms-input-placeholder { 
    color: #bbb; 
} 

input:focus::-webkit-input-placeholder { 
    color: #ddd; 
} 

input:focus::-moz-placeholder { 
    color: #aaa; 
} 

input[type="submit"] { 
    border-radius: 20px; 
    border: none; 
    width: 430px; 
    height: 35px; 
    font-size: 1.2em; 
    color: white; 
    margin-top: 5px; 
    margin-bottom: 20px; 
    background-color: #4F94CD; 
    font-family: 'Dosis', sans-serif; 
} 

input[type="submit"]:hover { 
    background-color: #7EC0EE; 
} 

.error-message { 
    display: none; 
    margin: 0 auto; 
    padding: 6px; 
    margin-top: 30px; 
    max-width: 300px; 
    background-color: #333; 
    color: white; 
    font-size: 20px; 
    border-radius: 8px; 
} 

p.redirect { 
    font-size: 1.2em; 
    color: #333; 
} 

p.redirect a { 
    color: #4F94CD; 
    font-weight: bold; 
    text-decoration: none; 
} 

p.redirect a:hover { 
    color: #82b0d6; 
} 


@media (max-width: 670px) { 

    .header { 
    font-size: 2.7em; 
    height: 60px; 
    margin-bottom: 20px; 
    } 

    .container > p { 
    font-size: 1.5em; 
    margin-bottom: 15px; 
    } 

    form { 
    max-width: 80%; 
    } 

}

источник

2017-01-05 Nate S.

Он не выравнивать вправо, он имеет горизонтальную прокрутку, поскольку width из поля ввода в px, сделать это в %

@media (max-width: 670px) { 

    .header { 
    font-size: 2.7em; 
    height: 60px; 
    margin-bottom: 20px; 
    } 

    .container > p { 
    font-size: 1.5em; 
    margin-bottom: 15px; 
    } 

    form,input { 
    max-width: 80%; 
    } 

}

См обновление: https://jsfiddle.net/ku9wsne8/2/

источник

2017-01-05 20:25:08 Rohit

Perfect - спасибо! Маркировка правильная, потому что это был самый простой ответ. Просто добавление «ввода» было уловкой для моих текстовых полей и кнопки отправки. –

Это потому, что некоторые элементы имеют определенную ширину.

Добавьте это в свой медиа-запрос, и он должен решить вашу проблему;

.all-input-text, 
input[type="submit"] { 
    width: 100%; 
}

Обновлено скрипка: https://jsfiddle.net/ku9wsne8/3/

источник

2017-01-05 20:23:59

Держите содержание центрируется при уменьшении ширины

ответ

Смежные вопросы