Суть всей проблемы в том, когда ширина браузера уменьшается до того размера, когда надпись не влезает в размеченную область, то вместо переноса на новую строку, он просто накладывается друг на друга. Данная ситуация повторяется и при принудительном переносе на новую строку тегом <br>
.
HTML
<article class="back_coupling" id="contacts">
<p class="title">
<span class="number_title">03</span> Связь <br>со мной
</p>
<div class="form_feedback">
<form class="feedback">
<input class="data" type="text" placeholder="Имя" required/>
<input class="data" type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required/>
<input class="subject" type="text" placeholder="Тема" required/>
<textarea class="message" placeholder="Сообщение"></textarea>
<input title="Сообщение будет отправлено получателю" class="sub" type="submit" value="Отправить" />
<div class="social">
<picture>
<a href="#" title="Vkontakte"><img class="icon-social" src="/img/icons/icon-vk.png" /></a>
<a href="#" title="Skype"><img class="icon-social" src="/img/icons/icon-skype.png" /></a>
<a href="#" title="GitHub"><img class="icon-social" src="/img/icons/icon-github.png" /></a>
</picture>
</div>
</form>
</div>
</article>
CSS
:root {
--main_color: #C000CD;
--main_color_light: #DB30E6;
--main_cont: Montserrat-Regular;
--main_title_color: silver;
--margin_ability: 10px;
--load_body: #444444;
--padding_between_sections: 200px 0px 200px 0px;
}
.title {
font-size: 48px;
letter-spacing: 0.1em;
/*color: var(--main_title_color);*/
text-align: center;
font-weight: bold;
color: #fff;
line-height: 0px;
transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
display: block;
position: relative;
white-space: normal;
}
.back_coupling {
background: url('/img/endfon.jpg') no-repeat center fixed;
background-size: cover;
width: 100%;
background-color: #464646;
padding: var(--padding_between_sections);
z-index: 1;
box-shadow: 0px 0px 7px 3px #323747 inset;
}
.form_feedback {
display: flex;
justify-content: center;
-webkit-justify-content: center;
padding: 50px 0px 0px;
}
.feedback {
background-color: var(--main_title_color);
padding: 50px;
width: 480px;
background-color: #4D5366;
box-shadow: 0px 0px 5px 5px #323747;
border-radius: 15px;
text-align: center
}
.feedback .data,
.feedback .subject,
.feedback .message {
border: 0px;
padding: 10px;
margin: 5px 0px;
width: 163px;
display: inline-block;
border-radius: 2px;
}
.feedback .subject,
.feedback .message {
width: 350px;
}
.feedback .message {
height: 100px;
font-family: var(--main_cont);
font-size: 12px;
font-style: normal;
}
.feedback .sub {
width: 372px;
margin-top: 5px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
cursor: pointer;
color: #fff;
background-color: #323747;
box-shadow: 0px 0px 4px 1px var(--main_color);
border: 0px;
transition: all ease 1s;
-o-transition: all ease 1s;
-moz-transition: all ease 1s;
-ms-transition: all ease 1s;
-webkit-transition: all ease 1s;
border-radius: 2px;
}
.feedback .sub:hover {
box-shadow: 0px 0px 4px 1px var(--main_color_light);
}
.feedback>input {
display: flex;
}