Не корректно отображаются элементы

@florida48 · Регистрация: 12.02.2020

Author24 — интернет-сервис помощи студентам

Добрый день только начинаю верстать то есть учусь . Хочу сверстать форму но что то не работает

HTML5

   <section class="info">
            <div class="wrapper">
                        <div class="text">
                            <p>Много много текста</p>
                        </div>
                        <form  name="newform">
                            <div class="block1">
                                    <input type="text">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block2">
                                    <input type="text">
                                    <input type="text">
                            </div>
                            <div class="block3">
                                    <input type="text">
                            </div>
                             <div class="block4">
                                    <input type="text">
                            </div>
                        </form>
                  </div>
   </section>

[CSS]
.wrapper{
max-width: 900px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.text{
max-width:42%;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}

input{
margin-bottom: 30px;
display: block;
padding: 16px 22px;
max-width: 100%;
margin-left: 10px;
}

.form{
width: 100%;
}
.block1{
display: flex;
flex-wrap: wrap;
}

.block2{
display: flex;
flex-wrap: wrap;
}

У меня несколько вопросов когда делаю форму с инпутами то он занимает не всю остававшеюся ширину то есть не до конца враппера как можно это решить. Еще когда сжимаю до мобильной версии. То там где по три инпута не переходит на отдельные строчки то есть при мобильной версии я хотел что бы все инпуты находились на своей строчке и занимали 100 % ширины экрана то есть врапепера. Ну и еще вопрос при мобильной версии текст занимает max-width:42%; , подскажите а нельзя что бы по контенту я ставил не max-width:42%; а к примеру если у меня инпуты занимают 52% не указывая ширины то текст занимал 100% оставшегося места, и при мобильной версии он тоже растягивался на 100 ширины враппера. Вроде мне кажется сделал все парвильно но неправильно работает (( Может даст кто дельный совет или натолкнет что не так

@florida48 · 12.02.2020, 21:55 **[ТС]**

а вот как в мобилки я хотел видеть

@Panda58dev · 12.02.2020, 22:13

florida48, здравствуй, на счёт формы: в css у тебя указано .form, то есть класс с названием "form", но такого класса нет в html коде, поэтому тебе надо либо убрать точку, и css будет обращаться не к классу "form", а к тегу form, либо прописать вместо ".form" -> "newform". То есть у тебя должно получиться так:

CSS

1
2
3

form{
width: 100%;
}

либо так:

CSS

1
2
3

.newform {
width: 100%;
}

Для мобильных версий страницы сайта обычно пользуются оператором @media о нём можно почитать тут, а также, ты сам можешь воспользоваться гуглом и разобраться в этом получше.

Добавлено через 8 минут
Но для начала, я бы советовал освоить базовый синтаксис html и css, а уже позже начать разбираться, как делать адаптивные страницы

@florida48 0 / 0 / 0 Регистрация: 12.02.2020 Сообщений: 3
	12.02.2020, 21:55 [ТС]	2
	а вот как в мобилки я хотел видеть Миниатюры 0

	12.02.2020, 22:13