Как складывать 3 элемента друг под друга при отображении телефона

Question

Я пытаюсь стилизовать - информационный бюллетень - ввод - отправить так, чтобы при просмотре веб-страницы в телефоне три элемента отображались один под другим - и все поля в том же размере и выровнять. У кого-нибудь есть простое решение для этого? Я очень ценю вашу помощь. С уважением и благодарностью! http://vtwg.eu/michael/index.html V

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 




input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

Answer 1

Если вы хотите изменить элементы дизайна для зрения mobie, вы должны использовать медиа запросов. В запросе медиаплеера snippet установлена ​​максимальная ширина окна просмотра, равная 480 пикселей. Вы можете изменить это значение по своему усмотрению. Когда вы ограничиваете окно браузера до менее 480 пикселей, вы увидите разницу.

input { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    width: 120px; 
 
    font-family: arial, sans-serif; 
 
    font-size: 1em; 
 
    margin: 0px 0px 4px 0px; 
 
    border: 3px solid black; 
 
    background: white; 
 
} 
 
.submit-button { 
 
    font-size: 1em; 
 
    display: inline-block; 
 
} 
 
label { 
 
    font-family: arial; 
 
    text-align: center; 
 
    width: 120px; 
 
    padding: 5.5px; 
 
    background:#57007F; 
 
    border: 3px solid black; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    input, .submit-button, label { 
 
    display: block; 
 
    width: 120px; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
}

<div id="contact-area"> 
 
<form method="post" action="contactengine.php"> 
 
<label for="Name">NEWSLETTER</label> 
 
<input type="text" name="Name" id="Name" /> 
 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
 
</form> 
 
</div>

Answer 2

Запись стилей в медиа-запросе относительно разрешения.

HTML:

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 

CSS:

input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

@media only screen and (max-width: 767px) { 
    label, 
    #Name, 
    .submit-button 
    { 
     width: 100%; 
     display: block; 
     margin: 5px 0; 
     box-sizing: border-box; 
    } 


    }